/* /about/: a colophon (assets/js/about-page.js). */

.about {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.about.is-ready { opacity: 1; }
.about em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.ab-lead { margin: 0 0 var(--s-7); max-width: 22ch; font-size: clamp(2rem, 1.2rem + 3.2vw, 4.2rem); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.04; }
.ab-lead .label { display: block; margin-bottom: var(--s-3); letter-spacing: var(--tracking-label); line-height: 1; }

.ab-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-7); align-items: start; }

/* The portrait, printed like the images on /work/; it comes to colour under the pointer. */
.ab-print { position: sticky; top: 96px; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper); }
.ab-print img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.3) brightness(1.05); mix-blend-mode: multiply; transition: filter 500ms var(--ease); }
.ab-print::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(22, 23, 27, 0.5) 0.85px, transparent 1.15px); background-size: 3.5px 3.5px; mix-blend-mode: multiply; opacity: 0.6; transition: opacity 500ms var(--ease); }
.ab-print:hover img { filter: none; mix-blend-mode: normal; }
.ab-print:hover::after { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ab-print img { filter: grayscale(1) contrast(1.1) brightness(0.85); mix-blend-mode: normal; }
  :root:not([data-theme="light"]) .ab-print::after { background-image: radial-gradient(rgba(236, 238, 243, 0.4) 0.85px, transparent 1.15px); mix-blend-mode: normal; opacity: 0.35; }
}
:root[data-theme="dark"] .ab-print img { filter: grayscale(1) contrast(1.1) brightness(0.85); mix-blend-mode: normal; }
:root[data-theme="dark"] .ab-print::after { background-image: radial-gradient(rgba(236, 238, 243, 0.4) 0.85px, transparent 1.15px); mix-blend-mode: normal; opacity: 0.35; }

/* The rows */
.ab-dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.ab-dl dt, .ab-dl dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ab-dl dt { padding-top: 19px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); scroll-margin-top: 96px; }
.ab-dl dd { margin: 0; font-size: var(--text-sm); line-height: 1.55; }
.ab-dl dd p { margin: 0 0 10px; }
.ab-dl dd p:last-child { margin: 0; }
.ab-soft { color: var(--ink-2); }

.ab-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ab-rows li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); }
.ab-rows .mono { padding-top: 2px; font-size: var(--text-xs); color: var(--ink-3); }
.ab-rows b { font-weight: var(--weight-medium); }

.ab-papers { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.4; }
.ab-papers a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ab-papers a:hover { text-decoration-color: var(--ink); }
.ab-papers .mono { font-size: var(--text-xs); color: var(--ink-3); }
.ab-more, .ab-cv { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); }
.ab-more:hover, .ab-cv:hover { color: var(--ink); }

.ab-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ab-links a { color: var(--ink-2); }
.ab-links a:hover { color: var(--ink); }

.ab-open { color: var(--ink-2); }
.ab-mail { display: inline-block; margin: 2px 0 10px; font-size: var(--text-md); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ab-mail:hover { text-decoration-color: var(--ink); }
.ab-reach { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); font-size: var(--text-xs); }

@media (max-width: 760px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-print { position: static; max-width: 280px; }
  .ab-dl { grid-template-columns: 1fr; }
  .ab-dl dt { padding-bottom: 0; border-bottom: 0; }
  .ab-rows li { grid-template-columns: 5.5rem 1fr; }
}