/*
  about only (/assets/site-20261025/about.css). Loads after site.css.
  The person, not the record: the career and the projects live on the résumé and the Work page. The hero
  is the app header (the portrait as its icon, the name, the résumé actions), then three short chapters,
  each in its own arrangement, the short version on the ink field, and the contact form on paper.
  HERO       .a-hero > .a-icon (portrait in an icon-shaped mask) + .a-hero-text (h1, .a-lede, .a-acts)
  CHAPTERS   .a-eng (heading left, prose right) · .a-ai (paper: heading, statement, aside) · .a-approach
             (centred, left-aligned on phones)
  SHORT      .a-short.band.on-dark > .a-short-grid: .a-short-text (h2, pointer to the résumé and Work,
             .a-short-acts) beside dl.a-facts (two columns of facts, one on phones)
  CONTACT    .contact-grid as on the home page (home.css); a candidate for site.css.
*/

/* ---------- Hero: the app header ---------- */
.a-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-top: clamp(20px, 3vw, 48px); }
.a-icon { grid-column: 1 / span 3; margin: 0; aspect-ratio: 1; border-radius: 23%; overflow: clip; background: #17161B; }
.a-icon img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); transform-origin: 52% 16%; }
.a-hero-text { grid-column: 4 / span 9; padding-left: clamp(0px, 1vw, 16px); }
.a-hero h1 { font-size: clamp(40px, 6.1vw, 88px); line-height: 0.95; }
.a-lede { margin: clamp(22px, 2.2vw, 32px) 0 0; max-width: 50ch; }
.a-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 2.4vw, 32px); }

/* ---------- Engineering: heading left, prose right ---------- */
.a-eng { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.a-eng h2 { grid-column: 1 / span 5; }
.a-prose { grid-column: 7 / span 6; }
.a-prose p { margin: 0; max-width: 60ch; }
.a-prose p + p { margin-top: 18px; }
.a-prose .a-first { font-size: clamp(20px, 1.55vw, 23px); line-height: 1.45; max-width: 44ch; margin-bottom: 28px; }
.a-prose strong { font-weight: 650; }

/* ---------- AI workflows: paper field, heading over a statement and its aside ---------- */
.a-ai-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(32px, 3.4vw, 52px); align-items: end; }
.a-ai-grid h2 { grid-column: 1 / -1; }
.a-statement { grid-column: 1 / span 7; margin: 0; font: 500 clamp(24px, 2.2vw, 32px)/1.28 var(--display); letter-spacing: -0.015em; text-wrap: pretty; }
.a-ai-side { grid-column: 9 / span 4; }
.a-ai-side p { margin: 0; }
.a-ai-side p + p { margin-top: 22px; }

/* ---------- Approach: the page's one centred moment ---------- */
.a-approach { display: grid; justify-items: center; text-align: center; }
.a-approach-1 { max-width: 30em; margin: clamp(28px, 3vw, 40px) 0 0; font: 500 clamp(24px, 2.1vw, 30px)/1.3 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.a-approach-2 { max-width: 60ch; margin: clamp(22px, 2.2vw, 30px) 0 0; text-wrap: balance; }

/* ---------- The short version: pointers and facts on the ink field ---------- */
.a-short-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(44px, 5vw, 64px); align-items: start; }
.a-short-text { grid-column: 1 / span 5; }
.a-short-text p { margin: 24px 0 0; max-width: 42ch; }
.a-short-text .a-short-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 2.8vw, 36px); }
.a-facts { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gutter); margin: 6px 0 0; }
.a-facts dt { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.a-facts dd { margin: 6px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.a-facts-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.a-facts-links a { font-weight: 600; color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; text-decoration-color: var(--line-2); transition: text-decoration-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .a-facts-links a:hover { text-decoration-color: currentColor; }
}

/* ---------- Contact (same as the home page) ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.contact-text { grid-column: 1 / span 5; }
.contact-text .lead { margin-top: 24px; }
.contact-text p + p { margin: 16px 0 0; }
.contact-text a { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; }
.contact-form { grid-column: 7 / span 6; min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .a-statement { grid-column: 1 / span 8; }
  .a-ai-side { grid-column: 9 / span 4; }
}
@media (max-width: 900px) {
  /* The icon and the title share the first row, like an app's header; the lede and actions run below. */
  .a-hero-text { display: contents; }
  .a-icon { grid-column: 1 / span 3; grid-row: 1; }
  .a-hero h1 { grid-column: 4 / -1; grid-row: 1; padding-left: 4px; font-size: 6.1vw; }
  .a-lede { grid-column: 1 / span 10; grid-row: 2; margin-top: 36px; }
  .a-acts { grid-column: 1 / -1; grid-row: 3; }

  .a-eng h2, .a-prose { grid-column: 1 / span 11; }
  .a-statement { grid-column: 1 / span 11; }
  .a-ai-side { grid-column: 1 / span 9; }
  .a-short-text, .a-facts { grid-column: 1 / -1; }

  .contact-text, .contact-form { grid-column: 1 / -1; }
  .contact-text .lead { max-width: 52ch; }
}
@media (max-width: 640px) {
  .br-wide { display: none; }
  .a-hero { padding-top: 16px; }
  .a-icon { grid-column: 1 / span 4; max-width: 112px; border-radius: 24%; }
  .a-hero h1 { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; padding: 0; font-size: clamp(32px, 9.6vw, 42px); }
  .a-lede { grid-column: 1 / -1; grid-row: 3; margin-top: 22px; }
  .a-acts { grid-row: 4; }
  .a-acts { flex-direction: column; align-items: stretch; gap: 18px; }
  .a-acts .btn { width: 100%; }
  .a-acts .text-link { align-self: flex-start; }


  .a-eng h2, .a-prose, .a-statement, .a-ai-side { grid-column: 1 / -1; }
  .a-prose .a-first { font-size: 20px; }
  .a-statement { font-size: 21px; line-height: 1.38; }
  .a-approach { justify-items: start; text-align: left; }
  .a-approach-1 { font-size: 21px; line-height: 1.38; text-wrap: pretty; }
  .a-approach-2 { text-wrap: pretty; }
  .a-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .a-short-acts { flex-direction: column; align-items: stretch !important; gap: 18px !important; }
  .a-short-acts .btn { width: 100%; }
  .a-short-acts .text-link { align-self: flex-start; }
}

/* ---------- Print: the short version turns to paper ---------- */
@media print {
  .foot, .a-acts, .a-short-acts { display: none !important; }
  .band.on-dark.a-short { display: block !important; color-scheme: light; --bg: #fff; --tone: #fff; --ink: #000; --ink-2: #333; --ink-3: #555; --line-2: #999; background: #fff; color: #000; margin-top: 18pt; padding: 0; }
  .band.on-paper { margin-top: 18pt; padding: 0; }
  .sec { padding-top: 18pt; }
  .a-facts > div { break-inside: avoid; }
}