*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #222;
  background: #f5f0ea;
}

a { color: #2a5db0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Desktop: two-column grid */
.page {
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar-top    content-about"
    "sidebar-research content-about";
  min-height: 100vh;
}

.sidebar-top      { grid-area: sidebar-top;       border-right: 1px solid #ddd6cc; padding: 2.5rem 2rem 1rem; }
.sidebar-research { grid-area: sidebar-research;  border-right: 1px solid #ddd6cc; padding: 0 2rem 2.5rem; }
.content-about    { grid-area: content-about;     padding: 2.5rem 2.5rem; }

/* Photo */
.photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 1px solid #ddd;
  margin-bottom: 1.25rem;
}

.sidebar-top h1 { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.35rem; }
.position { font-size: 0.82rem; color: #555; line-height: 1.6; margin-bottom: 0.75rem; }

.sidebar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  font-size: 0.8rem;
}

/* Research section */
.sidebar-research h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd6cc;
}
.sidebar-research h3 { font-size: 0.82rem; font-weight: 600; color: #333; margin-top: 1rem; margin-bottom: 0.5rem; }
.sidebar-research p { margin-bottom: 0.3rem; font-size: 0.85rem; line-height: 1.4; }
.sidebar-research ul { margin-left: 1rem; margin-bottom: 0.5rem; }
.sidebar-research ul li { font-size: 0.85rem; margin-bottom: 0.25rem; }

/* Main content */
.content-about section { margin-bottom: 2.25rem; }
.content-about h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 0.75rem;
}
.content-about h3 { font-size: 0.85rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.35rem; }
.content-about p { margin-bottom: 0.6rem; }
.content-about ul { margin-left: 1rem; margin-bottom: 0.6rem; }
.content-about ul li { margin-bottom: 0.25rem; }

/* Mobile: single column in desired order */
@media (max-width: 680px) {
  .page {
    display: flex;
    flex-direction: column;
  }
  .sidebar-top      { order: 1; border-right: none; padding: 1.5rem; }
  .content-about    { order: 2; padding: 0 1.5rem; }
  .sidebar-research { order: 3; border-right: none; border-top: 1px solid #ddd6cc; padding: 1.5rem; }
  .photo { max-width: 140px; }
  .sidebar-research h2 { border-top: none; padding-top: 0; }
}