/* Neuromeka AI Lab — site styles.
   Design tokens follow the site redesign handoff: 960px column, hairline
   borders, zero border-radius, no shadows, Inter + Barlow Condensed. */

:root {
  --color-bg: #ffffff;
  --color-text: #1d1f20;

  /* Neuromeka blue, taken from media/logo.png: links, strong text, kickers.
     Hover states use the lighter tint. */
  --color-accent: #0072ce;
  --color-accent-bright: #0072ce;
  --color-accent-hover: #3d95e0;

  /* Text at reduced strength. */
  --color-body-strong: color-mix(in srgb, var(--color-text) 78%, transparent);
  --color-body: color-mix(in srgb, var(--color-text) 75%, transparent);
  --color-body-soft: color-mix(in srgb, var(--color-text) 72%, transparent);
  --color-secondary: color-mix(in srgb, var(--color-text) 70%, transparent);
  --color-muted: color-mix(in srgb, var(--color-text) 60%, transparent);
  --color-meta: color-mix(in srgb, var(--color-text) 55%, transparent);
  --color-faint: color-mix(in srgb, var(--color-text) 50%, transparent);

  /* Hairline border and the lighter divider between rows. */
  --color-line: color-mix(in srgb, var(--color-text) 16%, transparent);
  --color-divider: color-mix(in srgb, var(--color-text) 8%, transparent);

  /* Hover tints. */
  --color-hover-row: color-mix(in srgb, var(--color-accent-bright) 5%, transparent);
  --color-hover-card: color-mix(in srgb, var(--color-accent-bright) 6%, transparent);

  --color-badge-bg: #eef6ff;
  --color-badge-text: #2c455d;

  /* Status notes such as leave or service periods. */
  --color-status: #2e8b57;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Barlow Condensed', 'Inter', system-ui, sans-serif;

  --content-width: 960px;
  --content-padding: 24px;
  --row-gap: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

/* ── Shared shell ─────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 12px var(--content-padding);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.brand img {
  height: 26px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--color-accent-bright);
}

.wrap {
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px var(--content-padding) 48px;
  display: flex;
  flex-direction: column;
}

.wrap-home {
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 36px;
}

/* The profile is a CV: tighter section rhythm than the home page. */
.wrap-profile {
  gap: 28px;
}

.site-footer {
  border-top: 1px solid var(--color-line);
}

.site-footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 14px var(--content-padding);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 12px;
  color: var(--color-muted);
}

.site-footer-tagline {
  color: var(--color-text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.site-footer-legal {
  margin-left: auto;
}

/* ── Headings and section furniture ───────────────────────────────────────── */

h1,
h2,
h3,
.kicker {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.page-title {
  font-size: 32px;
  line-height: 1.1;
}

h2 {
  font-size: 24px;
  line-height: 1.1;
}

.kicker {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.kicker-muted {
  color: var(--color-muted);
}

/* Title on the left, count or link on the right, hairline underneath. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 8px;
}

.section-head-link {
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

/* A section-head link that is a button, e.g. "Full list" on the talks. */
.section-toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--color-accent);
  cursor: pointer;
}

.section-toggle:hover {
  color: var(--color-accent-hover);
}

.talk-row[hidden] {
  display: none;
}

.section-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  white-space: nowrap;
}

.section-rows {
  display: flex;
  flex-direction: column;
}

.section-rows .section-head {
  margin-bottom: 4px;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 40px;
}

.badge {
  font-size: 12px;
  padding: 0 8px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
}

.list-empty {
  padding: 18px 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* ── Home: hero + about ───────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px 32px;
  align-items: start;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-text h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  text-wrap: pretty;
}

.about-body {
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-wrap: pretty;
}

.about-body p {
  margin: 0;
}

.about-body strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* Image slider: a horizontal track of full-width slides inside a 4:3 frame. */
.hero-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
}

.hero-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid #fff;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.hero-dots button[aria-current='true'] {
  background: #fff;
}

/* PI card spans both hero columns. */
.pi-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
}

.pi-card:hover {
  background: var(--color-hover-row);
  color: inherit;
}

.pi-card-photo {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.pi-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pi-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pi-card-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.pi-card-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
}

.pi-card-summary {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-secondary);
}

.pi-card-cta {
  font-size: 13px;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ── Home: research list ──────────────────────────────────────────────────── */

.research,
.team {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
  scroll-margin-top: 16px;
}

.post-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--row-gap);
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}

.post-row:hover {
  background: var(--color-hover-row);
  color: inherit;
}

.post-row-media {
  border: 1px solid var(--color-line);
  margin: 6px;
  overflow: hidden;
}

.post-row-media img,
.post-row-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  pointer-events: none;
}

.post-row-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.post-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.post-row-authors {
  color: var(--color-faint);
}

.post-row h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.post-row-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.8;
  text-wrap: pretty;
}

.post-row-publication {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-meta);
}

/* ── Home: team blocks ────────────────────────────────────────────────────── */

#teamContent {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.person-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
}

.person-photo {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team-row portraits are shown in grayscale; colour returns on hover.
   The PI card and the profile header photo stay in colour. */
.person-photo img {
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.person-row:hover .person-photo img {
  filter: none;
}

/* Fallback when no photo is set yet. */
.person-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-meta);
  background: var(--color-hover-row);
}

.person-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.person-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
}

.person-role {
  font-size: 12px;
  color: var(--color-muted);
}

.person-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--color-body);
}

.partner-labs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
}

.partner-labs-head {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 6px;
}

.partner-labs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--row-gap) 56px;
}

/* One short row per lab: name and institution left, a small mark right. */
.partner-lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

.partner-lab-mark {
  flex: 0 0 auto;
  height: 30px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
}

/* The KAIST file includes the swoosh below the letters; at this height its
   letters match the POSTECH wordmark, which the width cap renders ~9px tall. */
.partner-lab-mark[src*='kaist'] {
  height: 16px;
}

.partner-lab-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: inherit;
  text-decoration: none;
}

.partner-lab-link:hover {
  color: var(--color-accent-hover);
}

.partner-lab-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
}

.partner-lab-inst {
  font-size: 12px;
  color: var(--color-muted);
}

.positions {
  border: 1px solid var(--color-line);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.positions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.positions-contact {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
}

.positions-list {
  display: flex;
  flex-direction: column;
}

.position-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}

.position-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
}

.position-detail {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-body-strong);
}

.position-detail strong {
  color: var(--color-text);
  font-weight: 500;
}

.position-location {
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  white-space: nowrap;
}

/* ── PI profile ───────────────────────────────────────────────────────────── */

.profile-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.profile-photo {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-role {
  font-size: 13px;
  color: var(--color-muted);
}

.profile-status {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-status);
}

.profile-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}

/* Research mosaic: 4 columns of fixed-height rows; tiles span via inline style. */
.mosaic {
  --mosaic-row: 150px;
  display: grid;
  grid-template-columns: repeat(var(--mosaic-cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--mosaic-row);
  grid-auto-flow: dense; /* small tiles backfill gaps left by tall ones on narrow screens */
  gap: 8px;
}

/* Uniform photo grid: N equal columns, every tile the same aspect ratio. */
.mosaic-grid {
  grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
  grid-auto-rows: auto;
}

.mosaic-grid .mosaic-tile {
  aspect-ratio: var(--mosaic-aspect, 4 / 3);
}

.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
}

a.mosaic-tile:hover .mosaic-caption-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mosaic-tile img,
.mosaic-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
}

/* Dark scrim: the gradient starts well above the text so bright photo
   areas (snow, sky, white robot arms) never sit directly behind it. */
.mosaic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 10px 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.mosaic-caption-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.mosaic-caption-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.9;
}

/* Single-column tiles are small; keep their paper titles from filling them. */
.mosaic-tile[data-cols='1'] .mosaic-caption {
  padding: 28px 8px 6px;
}

.mosaic-tile[data-cols='1'] .mosaic-caption-title {
  font-size: 11px;
}

.mosaic-tile[data-cols='1'] .mosaic-caption-sub {
  font-size: 10px;
}

/* Date-led rows (experience, education, awards). */
.dated-row {
  display: grid;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.45;
}

/* Experience / Education: the date column hugs its text ("2018 – 2024") with
   roughly half the gap the 120px handoff column left before the title. */
.dated-row.date-120 {
  grid-template-columns: 88px minmax(0, 1fr);
}

.dated-row.date-48 {
  grid-template-columns: 48px minmax(0, 1fr);
}

.dated-row-when {
  color: var(--color-meta);
  font-variant-numeric: tabular-nums;
}

.dated-row-primary {
  font-weight: 500;
}

.dated-row-secondary {
  color: var(--color-secondary);
}

.funding-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.45;
}

.funding-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.funding-title {
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

a.funding-title:hover {
  color: var(--color-accent-hover);
}

.funding-program {
  color: var(--color-secondary);
}

/* The PI's own role on the grant, set apart in the accent colour. */
.funding-role {
  font-weight: 500;
  color: var(--color-body-strong);
}

.funding-meta {
  font-size: 12px;
  color: var(--color-meta);
}

.funding-press {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.funding-amount {
  align-self: start;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  white-space: nowrap;
}

.pub-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
}

.pub-year {
  font-size: 13px;
  color: var(--color-meta);
  font-variant-numeric: tabular-nums;
}

.pub-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Same weight and size as the lead line of the other CV rows. */
.pub-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.pub-authors {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-body-soft);
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--color-meta);
}

.pub-venue {
  font-weight: 500;
  color: var(--color-body-strong);
}

/* The profile owner's name within an author list. */
.pub-authors strong {
  font-weight: 500;
  color: var(--color-text);
}

.student-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.45;
}

.student-name {
  font-weight: 500;
}

a.student-name {
  color: var(--color-accent);
}

.student-note {
  color: var(--color-muted);
  text-align: right;
}

/* One line per talk: the venue column hugs its text, the title takes the rest. */
.talk-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) max-content;
  gap: 14px 20px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
}

.talk-date {
  color: var(--color-meta);
  font-variant-numeric: tabular-nums;
}

/* The title truncates; an optional "Video" link after it never does. */
.talk-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.talk-title-text {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-title a {
  flex: none;
}

.talk-venue {
  color: var(--color-muted);
}

.talk-country {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-meta);
}

/* ── Post detail ──────────────────────────────────────────────────────────── */

.post-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-back {
  font-size: 13px;
  text-decoration: none;
}

.post-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 12px;
}

.post-head h1 {
  font-size: 32px;
  line-height: 1.1;
}

.post-head-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-body-strong);
  text-wrap: pretty;
}

.post-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.post-head-meta .post-row-authors {
  color: var(--color-faint);
}

.paper {
  border: 1px solid var(--color-line);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paper-citation {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-body-strong);
}

.paper-citation strong {
  color: var(--color-text);
  font-weight: 500;
}

.paper-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--color-meta);
}

/* ── Markdown body ────────────────────────────────────────────────────────── */

.markdown {
  font-size: 15px;
  line-height: 1.6;
}

.markdown > *:first-child {
  margin-top: 0;
}

.markdown h2,
.markdown h3 {
  margin: 28px 0 8px;
}

.markdown h2 {
  font-size: 24px;
  line-height: 1.1;
}

.markdown h3 {
  font-size: 18px;
  line-height: 1.2;
}

.markdown p {
  margin: 0 0 12px;
  text-wrap: pretty;
}

.markdown ul,
.markdown ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.markdown li {
  margin-bottom: 4px;
}

.markdown strong {
  font-weight: 700;
}

.markdown hr {
  height: 0;
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.markdown img,
.markdown video {
  max-width: 560px;
  width: 100%;
  margin: 16px auto;
  border: 1px solid var(--color-line);
}

/* A standalone italic line after an image reads as its caption. */
.markdown em {
  display: block;
  max-width: 560px;
  margin: -8px auto 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-meta);
  text-align: center;
  font-style: normal;
}

.markdown iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--color-line);
  margin: 16px 0;
  display: block;
}

.markdown table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 13px;
}

.markdown th,
.markdown td {
  padding: 6px 10px;
  border: 1px solid var(--color-line);
  text-align: left;
}

.markdown th {
  font-weight: 500;
  color: var(--color-text);
}

.markdown code {
  font-size: 0.9em;
  padding: 1px 4px;
  border: 1px solid var(--color-divider);
}

.markdown pre {
  margin: 0 0 12px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--color-line);
}

.markdown pre code {
  padding: 0;
  border: 0;
}

/* ── Open sources (not linked from the nav) ───────────────────────────────── */

.repo-list {
  display: flex;
  flex-direction: column;
}

.repo-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
}

.repo-row h2 {
  font-size: 18px;
  line-height: 1.15;
}

.repo-row h2 a {
  text-decoration: none;
}

.repo-row p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-body-strong);
}

.repo-topics {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-meta);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .wrap {
    padding: 28px var(--content-padding) 40px;
  }

  .wrap-home,
  #teamContent {
    gap: 24px;
  }

  .wrap-profile {
    gap: 32px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* Slider below the text, then the PI card. */
  .hero-figure {
    order: 2;
    aspect-ratio: 16 / 9;
  }

  .pi-card {
    order: 3;
  }

  .profile-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .profile-photo {
    width: 140px;
    height: 140px;
  }

  /* Same arrangement as desktop, scaled with the viewport: rows are the
     desktop row height as a fraction of the content width. Captions cannot
     fit at this size, so they hide; the tiles still link. */
  .mosaic:not(.mosaic-grid) {
    grid-auto-rows: calc((100vw - 2 * var(--content-padding)) * var(--mosaic-row-frac, 0.11));
    gap: 4px;
  }

  .mosaic-grid {
    gap: 4px;
  }

  .mosaic .mosaic-caption {
    display: none;
  }

  /* Credentials wrap under the name instead of taking a third column. */
  .person-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    row-gap: 3px;
  }

  /* Name and credentials stack beside the photo. */
  .person-photo {
    grid-row: 1 / span 2;
  }

  .person-credentials {
    grid-column: 2;
  }

  .partner-labs-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .partner-lab-mark {
    height: 26px;
  }

  .position-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .position-location {
    justify-self: start;
  }

  .positions {
    padding: 16px;
  }

  /* Phones: title and venue may wrap, venue drops under the title. */
  .talk-row {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 2px 14px;
    white-space: normal;
  }

  .talk-venue {
    grid-column: 2;
  }


  .post-head h1,
  .page-title {
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  /* Keep the thumbnail beside the text, just narrower. */
  .post-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }

  .post-row-media {
    margin: 0;
  }

  .post-row-body {
    gap: 4px;
    padding-top: 0;
  }

  .post-row h3 {
    font-size: 18px;
  }

  .post-row-publication {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-track {
    transition: none;
  }
}