/* A compact editorial index: name → evidence → personal contribution. */
.hero { padding-top: var(--space-xs); padding-bottom: var(--space-2xl); }
.hero-eyebrow { display: flex; justify-content: space-between; gap: var(--space-md); border-top: 1px solid var(--rule); padding-top: var(--space-sm); }
.hero-composition { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-2xl); align-items: center; margin-top: var(--space-lg); }
.hero h1 { font: clamp(2.7rem, 4.6vw, 4.2rem)/1.06 var(--serif); letter-spacing: -.04em; }
.hero h1 em { color: var(--blue); font-weight: 400; }
.intro-copy { max-width: 38rem; margin-top: var(--space-lg); font-size: 1.0625rem; line-height: 1.55; }
.hero-academic { color: var(--muted); font: .6875rem/1.6 var(--mono); margin-top: var(--space-md); }
.hero-academic span { margin-left: var(--space-sm); }
.hero-copy>.text-link { margin-top: var(--space-sm); }
.hero-portrait { width: min(100%, 400px); margin-left: auto; }
.hero-portrait img { width: 100%; height: auto; }
.hero-portrait figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-xs); font: .6875rem/1.5 var(--mono); color: var(--muted); }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); align-items: baseline; border-top: 1px solid var(--rule); padding-top: var(--space-lg); margin-bottom: var(--space-lg); }
.section-heading h2 { font: 2rem/1.15 var(--serif); }
.section-heading sup { font: .65rem var(--mono); color: var(--blue-strong); margin-left: var(--space-xs); }
.section-heading>p { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) 2.5rem; align-items: start; }
.project-preview { min-width: 0; }
.preview-heading { margin-bottom: var(--space-md); }
.project-index { display: flex; gap: var(--space-sm); font: .6875rem/1.5 var(--mono); color: var(--muted); }
.project-index>span { color: var(--blue-strong); flex-shrink: 0; }
.project-link { color: var(--ink); text-decoration: none; display: block; }
.project-title { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; min-height: 44px; margin-top: .25rem; }
.project-title h3 { min-width: 0; overflow-wrap: anywhere; font-size: 1.875rem; letter-spacing: -.035em; }
.project-title>span { color: var(--blue-strong); font-size: 1.25rem; }
.project-link:hover h3, .project-link:focus-visible h3 { text-decoration: underline; text-underline-offset: .2em; color: var(--blue-strong); }
.feature-evidence { min-width: 0; }
.feature-copy { margin-top: var(--space-sm); }
.project-role { color: var(--blue-strong); font-size: .75rem; line-height: 1.5; }
.project-summary { font-size: .9375rem; line-height: 1.6; margin-top: var(--space-xs); max-width: 65ch; }
.project-ending { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-md); }
.project-note { color: var(--muted); font-size: .6875rem; line-height: 1.5; flex: 1 1 220px; }
.case-link { flex-shrink: 0; }
/* Math Lens uses the image comparison as its primary identity; the recording
   shares the lower field with the contribution, rather than floating alone. */
.project-preview--math-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
.project-preview--math-lens>.preview-heading { grid-column: 1 / -1; }
.project-preview--math-lens>.feature-evidence, .project-preview--math-lens .math-evidence { display: contents; }
.project-preview--math-lens .lens-comparison { grid-column: 1 / -1; margin-bottom: var(--space-md); }
.project-preview--math-lens .recording { grid-column: 2; grid-row: 3; width: 100%; margin: 0; }
.project-preview--math-lens>.feature-copy { grid-column: 1; grid-row: 3; margin: 0; }
.project-preview--math-lens .project-summary { font-size: .875rem; }
.about { margin-top: var(--space-xl); padding-block: var(--space-lg); }
.about-grid { border-top: 1px solid var(--rule); padding-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1.45fr; gap: var(--space-2xl); }
.about-context h2 { margin-top: var(--space-sm); font: clamp(1.8rem, 2.7vw, 2.5rem)/1.12 var(--serif); letter-spacing: -.025em; }
.about-portrait { display: none; }
.academic-line { margin-top: var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--gold); font-size: .75rem; line-height: 1.7; color: var(--muted); }
.about-copy { font-size: .875rem; line-height: 1.6; }
.practice-evidence { list-style: none; padding: 0; margin: var(--space-md) 0 0; font-size: .8125rem; }
.practice-evidence li { padding-block: var(--space-xs); border-top: 1px solid var(--rule); }
.practice-evidence strong { color: var(--blue-strong); font-weight: 500; }
.about-copy>.text-link { margin-top: var(--space-xs); }
.home-page .site-footer { border-top: 1px solid var(--rule); }
@media(max-width: 1024px) {
  .hero-composition { gap: var(--space-xl); grid-template-columns: 1.3fr 1fr; }
  .hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.4rem); }
  .intro-copy { font-size: 1rem; }
  .hero-academic span { display: block; margin-left: 0; }
  .project-grid { column-gap: var(--space-lg); }
  .project-preview--math-lens { display: block; }
  .project-preview--math-lens>.feature-evidence, .project-preview--math-lens .math-evidence { display: block; }
  .project-preview--math-lens .recording { width: min(100%, 280px); margin: var(--space-md) 0 0 auto; }
  .project-preview--math-lens>.feature-copy { margin-top: var(--space-sm); }
  .about-grid { grid-template-columns: 1fr 1.3fr; gap: var(--space-xl); }
}
@media(max-width: 768px) {
  .hero h1 { font-size: 2.25rem; }
  .hero-composition { gap: var(--space-lg); }
  .intro-copy { font-size: .9375rem; }
  .hero-portrait figcaption { flex-wrap: wrap; gap: 0 var(--space-xs); }
  .hero-eyebrow { font-size: .625rem; }
  .hero-eyebrow>span { white-space: nowrap; }
  .project-summary { font-size: .875rem; }
  .project-title h3 { font-size: 1.75rem; }
}
@media(max-width: 600px) {
  .hero { padding-bottom: var(--space-xl); }
  .hero-eyebrow { flex-wrap: wrap; gap: .25rem var(--space-md); }
  .hero-eyebrow>span { display: none; }
  .hero-composition { display: block; margin-top: var(--space-lg); }
  .hero h1 { font-size: clamp(2rem, 8.8vw, 3rem); }
  .intro-copy { font-size: 1rem; margin-top: var(--space-md); }
  .hero-academic { margin-top: var(--space-sm); }
  .hero-portrait { display: none; }
  .section-heading { align-items: start; padding-top: var(--space-md); margin-bottom: var(--space-lg); }
  .section-heading h2 { font-size: 1.6rem; }
  .section-heading>p { max-width: 21ch; font-size: .6875rem; }
  .project-grid { display: block; }
  .project-preview + .project-preview { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--rule); }
  .project-index { font-size: .625rem; }
  .project-summary { font-size: .9375rem; }
  .project-title h3 { font-size: 1.75rem; }
  .project-preview--math-lens .recording { width: min(100%, 300px); }
  .project-preview--math-lens .project-summary { font-size: .9375rem; }
  .about { margin-top: var(--space-xl); padding-block: var(--space-lg); }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding-top: var(--space-lg); }
  .about-identity { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-md); align-items: center; margin-top: var(--space-md); }
  .about-portrait { display: block; }
  .about-portrait img { width: 100%; height: auto; }
  .about-portrait figcaption { margin-top: .25rem; color: var(--muted); font: .625rem var(--mono); }
  .academic-line { margin: 0; font-size: .6875rem; padding-left: var(--space-sm); }
}
@media(prefers-reduced-motion: no-preference) {
  .project-title>span, .text-link>span { transition: transform var(--motion-fast) var(--ease); }
  .project-link:hover .project-title>span, .project-link:focus-visible .project-title>span { transform: translate(3px, -3px); }
  .text-link:hover>span, .text-link:focus-visible>span { transform: translateX(3px); }
}

/* Math Lens homepage CTA: use the existing desktop column height. */
@media(min-width:1025px) {
  .project-preview--math-lens>.feature-copy { display: flex; flex-direction: column; }
  .project-preview--math-lens .project-ending { flex: 1; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .project-preview--math-lens .project-note { flex: none; }
  .project-preview--math-lens .case-link { margin-top: auto; }
}