/* ===== Cool Blue theme variables (Light & Dark) ===== */
:root {
  /* Light (cool blue) */
  --bg: #f4f9fc;
  --text: #2c3e50;
  --muted: #64748b;
  --divider: #dbeafe;
  --section-odd: #eaf2f8;
  --link: #0284c7;
  --link-underline: rgba(2, 132, 199, 0.3);
  --btn-bg: #e0f2fe;
  --btn-border: #bae6fd;
  --btn-text: #0369a1;
}
html.dark-mode {
  /* Dark (cool blue) */
  --bg: #0f172a;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --divider: #1e293b;
  --section-odd: #162032;
  --link: #38bdf8;
  --link-underline: rgba(56, 189, 248, 0.35);
  --btn-bg: #1e293b;
  --btn-border: #334155;
  --btn-text: #e0f2fe;
}
@media (prefers-color-scheme: dark) {
  html:not(.dark-mode):not(.light-mode) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  html:not(.dark-mode):not(.light-mode) { color-scheme: light; }
}

/* ===== Base layout & typography ===== */
.wrapper { max-width: 1000px; margin: 0 auto; padding: 0 1rem; }
html { font-size: clamp(16px, 1.1rem + 1vw, 20px); }
body {
  margin: 0;
  font-family: "Merriweather", serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

h1.name { font-size: 2.25rem; margin: 0.5rem 0; }
h2 { font-size: 1.75rem; margin: 1.5rem 0 0.5rem; }

.links a { text-decoration: none; border-bottom: 1px solid transparent; color: var(--link); }
.links a:hover, .links a:focus { border-bottom-color: var(--link-underline); }

img { display: block; width: 100%; height: auto; object-fit: contain; }
.profile-img { object-fit: cover; border-radius: 50%; max-width: 250px; margin: 0 auto; }
.logo-img { max-width: 150px; height: auto; margin: 0 auto; object-fit: contain; }

.personal-intro { display: flex; align-items: center; gap: 2rem; flex-wrap: nowrap; }
.personal-intro figure { flex: 0 0 250px; text-align: center; margin: 0; }
.personal-intro > div { flex: 1 1 auto; }
.caption { font-size: 0.9rem; color: var(--muted); margin-top: 0.25rem; }

section { padding: 2rem 1rem; }
section > h2 { border-bottom: 2px solid var(--divider); padding-bottom: 0.5rem; margin-bottom: 1rem; }
section:nth-of-type(odd) { background: var(--section-odd); }
section:nth-of-type(even) { background: var(--bg); }

.edu-table td, .prof-table td { vertical-align: top; padding: 1rem 1.5rem; }
.logo-cell { width: 160px; }

.publications .pub { display: grid; grid-template-columns: 1fr 2.2fr; gap: 1.25rem; align-items: center; }
.publications .pub-media { width: 100%; }
.publications .pub-body { font-size: 1rem; line-height: 1.5; }
.papertitle { font-size: 1.125rem; margin: 0.25rem 0 0.5rem; }
.authors, .venue, .links, .summary { margin: 0.25rem 0; }

.news-list { list-style: none; padding-left: 0; margin: 0; }
.news-list li { margin: 0.25rem 0; }
.news-list time { font-variant-numeric: tabular-nums; }

.footer { padding: 2rem 1rem; text-align: left; }

.toolbar { display: flex; gap: .5rem; margin-top: .5rem; }
.mode-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; border-radius: 999px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text);
  cursor: pointer; font: inherit;
}
.mode-toggle:hover { filter: brightness(0.97); }

@media (max-width: 600px) {
  html { font-size: clamp(14px, 1rem + 1vw, 18px); }
  body { font-size: 1.0625rem; }
  h1.name { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .personal-intro { flex-wrap: wrap; flex-direction: column-reverse; align-items: center; }
  .personal-intro figure, .personal-intro > div { width: 100%; box-sizing: border-box; }
  .publications .pub { grid-template-columns: 1fr; }
}

@media print {
  section:nth-of-type(odd) { background: #fff; }
  a { color: #000; text-decoration: underline; }
}