/* About and CV page layer (owner: page-about, workstream B). Used by pages/about.html and pages/cv.html.
   Contract (test-enforced): every selector starts with .ci-about-; tokens only; no custom-property definitions.
   Promote a piece into components.css (design-system change, docs/brand/m3-design-system.md §6) once a page
   outside About/CV needs it (the timeline is the first candidate).
   M7.5 (owner brief, 2026-11-13): About is the narrative (identity header, approach steps, an experience rail,
   expertise lists, education and research, a quiet close); the CV is a resume sheet with an A4 print layout.
   Motion: About marks a few items .ci-rise-in (components.css: transform only, behind reduced-motion and @supports).
   Print: only page-owned pieces are adjusted here; the layout chrome has its own print rule in components.css. */

/* ---------------------------------------------------------------- About: identity header */
.ci-about-profile { display: grid; gap: var(--ci-space-8); align-items: center; }
.ci-about-profile__portrait { width: min(100%, 13rem); margin: 0; }
.ci-about-profile__frame { overflow: hidden; aspect-ratio: var(--ci-ratio-portrait); border-radius: var(--ci-radius-panel); background: var(--ci-color-surface-inverse); box-shadow: var(--ci-shadow-portrait); }
.ci-about-profile__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ci-crop-portrait); }
.ci-about-profile__caption { margin-top: var(--ci-space-3); color: var(--ci-color-text-muted); font-size: var(--ci-text-meta); text-align: center; }
.ci-about-profile__facts { display: flex; flex-wrap: wrap; gap: var(--ci-space-3) var(--ci-space-7); margin-top: var(--ci-space-6); }
.ci-about-profile__facts dt { display: flex; align-items: center; color: var(--ci-color-text-muted); font-size: var(--ci-text-meta); }
.ci-about-profile__facts dd { margin: 0.15rem 0 0; font-weight: var(--ci-weight-semibold); }
.ci-about-profile__claims { margin-top: var(--ci-space-4); }
.ci-about-hero__text { min-width: 0; }
.ci .ci-about-hero__title { margin-top: var(--ci-space-3); font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); font-weight: var(--ci-weight-heavy); letter-spacing: var(--ci-tracking-display); line-height: var(--ci-leading-tight); text-wrap: balance; }
.ci-about-hero__title > span { display: block; }
.ci-about-hero__title > span + span { color: var(--ci-color-technical); }
.ci-about-hero__role { display: flex; flex-wrap: wrap; gap: var(--ci-space-1) var(--ci-space-4); align-items: baseline; margin-top: var(--ci-space-5); }
.ci-about-hero__descriptor { font-weight: var(--ci-weight-bold); }
.ci-about-hero__positioning { color: var(--ci-color-text-muted); font-weight: var(--ci-weight-semibold); }
.ci-about-hero__copy { display: grid; gap: var(--ci-space-3); max-width: var(--ci-width-intro); margin-top: var(--ci-space-5); }
.ci-about-hero__copy p { margin: 0; }
.ci-about-lead { font-size: var(--ci-text-lede); line-height: 1.6; text-wrap: pretty; }
.ci-about-hero .ci-actions { margin-top: var(--ci-space-6); }

/* ---------------------------------------------------------------- About: parts (hairline transitions) */
.ci-about-part { border-top: var(--ci-border-width) solid var(--ci-color-border-subtle); }
.ci-about-part__head { max-width: var(--ci-width-intro); margin-bottom: var(--ci-space-7); }
.ci .ci-about-part__title { margin-top: var(--ci-space-2); font-size: var(--ci-text-h2); font-weight: var(--ci-weight-heavy); letter-spacing: var(--ci-tracking-heading); line-height: var(--ci-leading-tight); text-wrap: balance; }
.ci-about-part__intro { margin-top: var(--ci-space-4); color: var(--ci-color-text-muted); text-wrap: pretty; }
.ci-about-more { margin-top: var(--ci-space-1); }

/* Approach: six numbered steps divided by hairlines, never cards. */
.ci-about-steps { display: grid; gap: 0; counter-reset: none; }
.ci-about-steps__item { display: grid; align-content: start; gap: var(--ci-space-2); padding-block: var(--ci-space-5); border-top: var(--ci-border-width) solid var(--ci-color-border-subtle); }
.ci-about-steps__num { color: var(--ci-color-technical); font-family: var(--ci-font-mono); font-size: var(--ci-text-small); font-weight: var(--ci-weight-bold); letter-spacing: var(--ci-tracking-eyebrow); }
.ci .ci-about-steps__title { font-size: var(--ci-text-title-sm); font-weight: var(--ci-weight-bold); line-height: var(--ci-leading-snug); }
.ci-about-steps__text { margin: 0; color: var(--ci-color-text-muted); font-size: var(--ci-text-body-sm); line-height: 1.6; }

/* Timeline: a node per entry; the rail variant joins the nodes with a vertical line. */
.ci-about-timeline { display: grid; gap: var(--ci-space-6); }
.ci-about-timeline__item { position: relative; padding-inline-start: var(--ci-space-6); }
.ci-about-timeline__item::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 11px; height: 11px; border: 2px solid var(--ci-color-technical); border-radius: 50%; background: var(--ci-color-surface); }
.ci-about-timeline__item p { margin: 0 0 0.4rem; }
.ci-about-timeline__dates { color: var(--ci-color-text-muted); font-size: var(--ci-text-small); font-variant-numeric: tabular-nums; }
.ci .ci-about-timeline__role { font-size: var(--ci-text-title-sm); font-weight: var(--ci-weight-bold); line-height: var(--ci-leading-snug); }
.ci-about-timeline__role a { color: inherit; }
.ci-about-timeline__org { color: var(--ci-color-technical); font-weight: var(--ci-weight-semibold); }
.ci-about-timeline__highlight { padding-inline-start: var(--ci-space-4); border-inline-start: 2px solid var(--ci-color-border); color: var(--ci-color-text-muted); font-size: var(--ci-text-body-sm); }
.ci-about-timeline--rail { max-width: var(--ci-width-reading); gap: var(--ci-space-8); }
.ci-about-timeline--rail > .ci-about-timeline__item { padding-inline-start: var(--ci-space-8); }
.ci-about-timeline--rail > .ci-about-timeline__item::after { content: ""; position: absolute; left: 4.5px; top: 1.6rem; bottom: calc(-1 * var(--ci-space-8) + 0.3rem); width: 2px; background: var(--ci-color-border); }
.ci-about-timeline--rail > .ci-about-timeline__item:last-child::after { display: none; }

/* Expertise: four groups, each a compact list of short items. */
.ci-about-expertise { display: grid; gap: var(--ci-space-6); }
.ci-about-expertise__group { padding-top: var(--ci-space-4); border-top: 2px solid var(--ci-color-technical); }
.ci .ci-about-expertise__title { font-size: var(--ci-text-title-sm); font-weight: var(--ci-weight-bold); }
.ci-about-expertise__items { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); margin-top: var(--ci-space-4); }
.ci-about-expertise__items li { padding: 0.3rem 0.75rem; border: var(--ci-border-width) solid var(--ci-color-border); border-radius: var(--ci-radius-pill); background: var(--ci-color-surface); font-size: var(--ci-text-small); line-height: 1.4; }

/* Education & research. */
.ci-about-edu { display: grid; gap: var(--ci-space-8); }
.ci .ci-about-research__title { margin-bottom: var(--ci-space-4); color: var(--ci-color-text-muted); font-size: var(--ci-text-small); font-weight: var(--ci-weight-bold); letter-spacing: var(--ci-tracking-eyebrow); text-transform: uppercase; }
.ci-about-research__list { display: grid; gap: var(--ci-space-4); }
.ci-about-research__list li { display: grid; gap: 0.2rem; }
.ci-about-research__link { font-weight: var(--ci-weight-bold); }
.ci-about-research__sub { color: var(--ci-color-text-muted); font-size: var(--ci-text-body-sm); }

/* Close: one quiet panel, four routes. */
.ci-about-close { display: grid; gap: var(--ci-space-5); padding: var(--ci-space-7); border: var(--ci-border-width) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-card); background: var(--ci-color-surface); }
.ci .ci-about-close__title { font-size: var(--ci-text-h3); font-weight: var(--ci-weight-heavy); }
.ci-about-close__text { margin: var(--ci-space-2) 0 0; color: var(--ci-color-text-muted); }
.ci-about-close .ci-actions { margin: 0; align-items: center; }

/* ---------------------------------------------------------------- CV: header and sheet */
.ci-about-cvhead__grid { display: grid; gap: var(--ci-space-6); }
.ci-about-cvhead__positioning { margin-top: var(--ci-space-2); color: var(--ci-color-technical); font-weight: var(--ci-weight-semibold); }
.ci-about-cvhead__side { display: grid; gap: var(--ci-space-4); align-content: end; justify-items: start; }
.ci-about-cvhead__contact { display: grid; gap: var(--ci-space-2); font-size: var(--ci-text-body-sm); overflow-wrap: anywhere; }
.ci-about-cvhead__contact li { display: flex; flex-wrap: wrap; gap: var(--ci-space-3); align-items: baseline; }
.ci-about-printctl .ci-btn { gap: var(--ci-space-2); }
.ci-about-printhelp { width: min(30rem, 100% - 2rem); padding: var(--ci-space-6); border: var(--ci-border-width) solid var(--ci-color-border); border-radius: var(--ci-radius-card); background: var(--ci-color-surface); color: var(--ci-color-text); box-shadow: var(--ci-shadow-float); }
.ci-about-printhelp::backdrop { background: var(--ci-color-shadow); }
.ci-about-printhelp p { margin: 0 0 var(--ci-space-4); font-size: var(--ci-text-body-sm); line-height: 1.6; }
.ci-about-printhelp__title { font-weight: var(--ci-weight-bold); }
.ci-about-printhelp kbd { padding: 0.05rem 0.4rem; border: var(--ci-border-width) solid var(--ci-color-border-control); border-radius: var(--ci-radius-sm); background: var(--ci-color-surface-sunken); font-family: var(--ci-font-mono); font-size: var(--ci-text-meta); }

.ci-about-sheet { max-width: 58rem; padding: var(--ci-space-6); border: var(--ci-border-width) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-card); background: var(--ci-color-surface); }
.ci-about-sheet__part + .ci-about-sheet__part { margin-top: var(--ci-space-7); padding-top: var(--ci-space-7); border-top: var(--ci-border-width) solid var(--ci-color-border-subtle); }
.ci .ci-about-sheet__title { margin-bottom: var(--ci-space-5); color: var(--ci-color-technical); font-size: var(--ci-text-small); font-weight: var(--ci-weight-bold); letter-spacing: var(--ci-tracking-eyebrow); text-transform: uppercase; }
.ci-about-sheet__note { margin-bottom: var(--ci-space-4); color: var(--ci-color-text-muted); font-size: var(--ci-text-body-sm); }
.ci-about-sheet__list { display: flex; flex-wrap: wrap; gap: var(--ci-space-3) var(--ci-space-7); margin-bottom: var(--ci-space-4); }
.ci-about-sheet__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-2); overflow-wrap: anywhere; }
.ci-about-sheet__label { color: var(--ci-color-text-muted); font-size: var(--ci-text-meta); font-weight: var(--ci-weight-semibold); }
.ci-about-cvsummary { margin: 0; font-size: var(--ci-text-body); line-height: 1.65; text-wrap: pretty; }
.ci-about-cvroles__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--ci-space-4); align-items: baseline; margin-bottom: 0.3rem; }
.ci-about-cvroles__head > * { margin: 0; }
.ci-about-cvlist { display: grid; gap: var(--ci-space-2); margin: var(--ci-space-3) 0 var(--ci-space-2); padding-inline-start: 1.1rem; list-style: disc; font-size: var(--ci-text-body-sm); line-height: 1.55; }
.ci-about-cvlist li::marker { color: var(--ci-color-technical); }
.ci-about-cvskills { display: grid; gap: var(--ci-space-4); margin: 0; }
.ci-about-cvskills__row dt { font-weight: var(--ci-weight-bold); }
.ci-about-cvskills__row dd { margin: 0.2rem 0 0; color: var(--ci-color-text-muted); font-size: var(--ci-text-body-sm); line-height: 1.6; }
.ci-about-cvprojects { display: grid; gap: var(--ci-space-5); }
.ci-about-cvprojects__item p { margin: 0 0 0.35rem; }
.ci-about-cvprojects__stack { color: var(--ci-color-text-muted); font-size: var(--ci-text-meta); }

@media (min-width: 40em) {
  .ci-about-profile__portrait { width: 16rem; }
  .ci-about-sheet { padding: var(--ci-space-8); }
  .ci-about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ci-space-8); }
  .ci-about-expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-7) var(--ci-space-8); }
  .ci-about-cvskills__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--ci-space-4); }
  .ci-about-cvskills__row dd { margin: 0; }
  .ci-about-close { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--ci-space-8); }
  /* M5: the same layered depth as the home portrait (an offset tinted plane), as a shadow so the frame keeps its crop. */
  .ci-about-profile__frame { box-shadow: var(--ci-shadow-portrait), 1rem 1rem 0 0 var(--ci-color-surface-technical); }
  .ci-about-profile__portrait { margin-bottom: var(--ci-space-4); }
}
@media (min-width: 52em) {
  .ci-about-profile { grid-template-columns: auto minmax(0, 1fr); gap: var(--ci-space-10); }
  .ci-about-profile--text { grid-template-columns: minmax(0, 1fr); }   /* M6.2: no approved portrait, no frame */
  .ci-about-cvhead__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .ci-about-edu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .ci-about-profile__portrait { width: 19rem; }
  .ci-about-part > .ci-wrap { display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: var(--ci-space-10); }
  .ci-about-part__head { margin-bottom: 0; }
  .ci-about-close { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Print (CV, A4 in components.css): ink on paper. No actions, hints or frames; nothing split mid-entry; the
   sheet set a little smaller so the resume fits on about two pages. */
@media print {
  .ci-about-noprint, .ci-about-cvcontact, .ci-about-cvprojects__stack { display: none; }
  .ci-about-cvhead::before { content: none; }
  .ci-about-sheet { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.8rem; line-height: 1.45; }
  .ci-about-cvhead__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ci-space-5); align-items: end; }
  .ci-about-cvhead__contact { font-size: 0.8rem; }
  .ci-about-cvhead__contact a { text-decoration: none; }
  .ci-about-sheet__part + .ci-about-sheet__part { margin-top: var(--ci-space-3); padding-top: var(--ci-space-3); }
  .ci .ci-about-sheet__title { margin-bottom: var(--ci-space-2); break-after: avoid; }
  .ci .ci-about-timeline__role { font-size: 0.9rem; }
  .ci-about-timeline__item p, .ci-about-cvprojects__item p { margin-bottom: 0.2rem; }
  .ci-about-cvsummary { font-size: 0.85rem; line-height: 1.5; }
  .ci-about-timeline { gap: var(--ci-space-3); }
  .ci-about-cvprojects { gap: var(--ci-space-2); }
  .ci-about-cvlist { gap: 0.15rem; margin-block: var(--ci-space-1); font-size: 0.78rem; }
  .ci-about-cvskills__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--ci-space-3); }
  .ci-about-cvskills { gap: var(--ci-space-2); }
  .ci-about-cvskills__row dd { margin: 0; font-size: 0.78rem; line-height: 1.45; }
  .ci-about-timeline__item, .ci-about-cvprojects__item, .ci-about-cvskills__row, .ci-about-sheet__list li { break-inside: avoid; }
}