/* The site's pixel titles frame the photographs; reading copy stays in the sans face. */
.about-page .about-heading { margin-bottom: 48px; }
.about-page .about-heading h1 { margin: 0; }
.about-section { padding-block: 48px 64px; border-top: 2px solid var(--line); }
.about-section:last-child { padding-bottom: 0; }
.about-section > h2 { margin: 0 0 36px; font-family: var(--serif); font-size: clamp(30px, 3.1vw, 44px); font-weight: 400; line-height: 1.5; }
.about-page .prose { background: transparent; font-size: 18px; line-height: 1.95; }
.about-introduction > .prose { max-width: 48em; }
.about-page .prose > :first-child { margin-top: 0; }
.about-page .prose > :last-child { margin-bottom: 0; }
.about-page .prose h2 { font-size: 26px; }
.about-page .prose h3 { font-size: 23px; }
.about-page .prose h4 { font-size: 20px; }
.about-work, .about-experience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.about-work + .about-work { margin-top: 48px; }
.about-entry-copy { min-width: 0; padding-block: 12px; }
.about-entry-copy > h3 { margin: 0 0 24px; color: var(--text); font-family: var(--serif); font-size: clamp(26px, 2.8vw, 36px); font-weight: 400; line-height: 1.5; }
.about-entry-period { margin: 0 0 12px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.about-image { display: grid; place-items: center; min-width: 0; min-height: 280px; margin: 0; padding: 24px; border: 2px solid var(--line); background: var(--surface); }
.about-image img { display: block; max-width: 100%; height: auto; max-height: 560px; margin-inline: auto; object-fit: contain; }
.about-image .image-preview-trigger { display: grid; place-items: center; }
.about-image .image-preview-trigger:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
.about-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.about-carousel-navigation { display: flex; align-items: center; gap: 16px; }
.about-carousel-arrow, .about-carousel-play { min-height: 44px; border: 2px solid var(--line); color: var(--text); background: var(--surface); border-radius: 0; font-family: var(--serif); font-size: 17px; }
.about-carousel-arrow { width: 48px; padding: 0; font-family: var(--sans); font-size: 26px; }
.about-carousel-play { padding: 8px 16px; }
.about-carousel-arrow:hover, .about-carousel-play:hover { background: var(--soft); border-color: var(--accent); }
.about-carousel-arrow:active, .about-carousel-play:active { background: var(--accent); color: var(--on-accent); }
.about-carousel-count { min-width: 4em; text-align: center; color: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.about-carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
.about-carousel-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--accent); background: transparent; }
.about-carousel-dots button span { width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 50%; }
.about-carousel-dots button[aria-current="true"] span { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.about-carousel-dots button:hover span { border-color: var(--accent); background: var(--soft); }
.about-carousel-dots button[aria-current="true"]:hover span { background: var(--accent); }
.about-carousel [hidden] { display: none !important; }
.about-carousel[data-carousel-ready] .about-work + .about-work { margin-top: 0; }
.about-experience + .about-experience { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.about-experience:nth-child(even) .about-image { grid-column: 2; grid-row: 1; }
.about-experience:nth-child(even) .about-entry-copy { grid-column: 1; grid-row: 1; }
.about-work:not(:has(.about-image)) > .about-entry-copy, .about-experience:not(:has(.about-image)) > .about-entry-copy { grid-column: 1 / -1; max-width: 48em; }
@media (prefers-reduced-motion: no-preference) {
  .about-carousel[data-carousel-ready] .about-work:not([hidden]) { animation: about-work-arrive 220ms ease-out both; }
  .about-carousel-arrow, .about-carousel-play { transition: background-color 120ms steps(2), color 120ms steps(2), border-color 120ms steps(2); }
}
@keyframes about-work-arrive { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 1050px) {
  .about-work, .about-experience { gap: 32px; }
  .about-image { padding: 20px; min-height: 240px; }
}
@media (max-width: 760px) {
  .about-page .about-heading { margin-bottom: 32px; }
  .about-section { padding-block: 32px 48px; }
  .about-section > h2 { font-size: 30px; margin-bottom: 28px; }
  .about-work, .about-experience { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-image { min-height: 200px; padding: 20px; }
  .about-image img { max-height: 480px; }
  .about-entry-copy { padding-block: 0; }
  .about-entry-copy > h3 { font-size: 28px; margin-bottom: 20px; }
  .about-experience:nth-child(even) .about-image, .about-experience:nth-child(even) .about-entry-copy { grid-column: 1; grid-row: auto; }
  .about-carousel-controls { gap: 12px; margin-bottom: 24px; }
  .about-carousel-navigation { gap: 8px; }
  .about-carousel-count { min-width: 3em; }
  .about-carousel-play { padding-inline: 12px; font-size: 16px; }
  .about-experience + .about-experience { margin-top: 40px; padding-top: 40px; }
}
@media print {
  .about-carousel [data-carousel-slide][hidden] { display: grid !important; }
  .about-carousel-controls, .about-carousel-dots { display: none !important; }
  .about-carousel[data-carousel-ready] .about-work + .about-work { margin-top: 32px; }
  .about-work, .about-experience { break-inside: avoid; }
}