/* About-page layout. DaisyUI and the shared Markdown renderer own the
   typography, surfaces, controls, and theme colours. */
.about-page a { text-underline-offset: 4px; }
.about-page a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) 256px; align-items: center; gap: 32px; padding: 32px 0; }
.about-kicker { display: flex; align-items: center; gap: 10px; font-size: .875rem; margin: 0 0 16px; }
.about-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.about-hero h1 { margin: 0; }
.about-hero-aside { text-align: center; }
.about-location { margin-top: 16px; font-size: .875rem; }

.about-context { padding: 28px 0; border-block: 1px solid var(--color-base-300); }
.about-context > p { line-height: 1.75; }
.about-section { padding: 48px 0; scroll-margin-top: 24px; }
.about-section + .about-section { border-top: 1px solid var(--color-base-300); }
.about-section-header { margin-bottom: 28px; }
.about-copy > h3:first-child { margin-top: 0; }
.about-copy > p:last-child { margin-bottom: 0; }

#experience h3:first-child + p { opacity: .6; font-size: .875rem; }
#experience ol { display: grid; margin: 24px 0; padding: 0; list-style: none; border-left: 1px solid var(--color-base-300); }
#experience ol li { position: relative; padding: 8px 0 8px 20px; margin: 0; font-size: .875rem; }
#experience ol li::before { content: ''; position: absolute; left: -4px; top: 17px; width: 7px; height: 7px; border: 1px solid var(--color-base-300); border-radius: 50%; background: var(--color-base-100); }
#experience ol li:first-child::before { background: var(--color-primary); border-color: var(--color-primary); }
#experience ol strong { display: inline-block; min-width: 205px; }
#experience h4 { margin-top: 28px; }
#experience h3:not(:first-child) { border-top: 1px solid var(--color-base-300); padding-top: 24px; margin-top: 32px; }
#experience h3:not(:first-child) ~ p { font-size: .875rem; }

.about-publications { margin-top: 24px; }
.about-publications p { font-size: .875rem; line-height: 1.75; margin: 8px 0 0; }

@media (max-width: 800px) {
  .about-hero { gap: 24px; grid-template-columns: minmax(0, 1fr) 180px; }
  .about-portrait { width: 180px; height: 180px; }
  .about-section { padding: 36px 0; }
}

@media (max-width: 520px) {
  .about-hero { grid-template-columns: 1fr; padding: 36px 0; }
  .about-hero-aside { display: none; }
  .about-kicker { font-size: .75rem; }
  .about-context { padding-block: 24px; }
  #experience ol strong { display: block; min-width: 0; }
}

@media print {
  body:has(.about-page) > nav, .about-hero-aside { display: none; }
  .about-page { max-width: none; padding: 0; }
  .about-hero { display: block; padding: 0 0 16px; }
  .about-hero h1 { margin-bottom: 12px; }
  .about-context { padding: 16px 0; }
  .about-section { padding: 20px 0; }
  .about-section-header { margin-bottom: 16px; }
  .about-copy h3, .about-copy h4 { break-after: avoid; }
  .about-copy p, #experience ol { break-inside: avoid; }
}