:root {
  --bg: #fbfaf7;
  --surface: #f2f0ea;
  --text: #201f1b;
  --text-muted: #6b6a63;
  --border: #ddd9cf;
  --accent: #2c4b76;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a;
    --surface: #1d1e23;
    --text: #ece9e2;
    --text-muted: #a0a0a0;
    --border: #33343a;
    --accent: #7fa8d9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15161a;
  --surface: #1d1e23;
  --text: #ece9e2;
  --text-muted: #a0a0a0;
  --border: #33343a;
  --accent: #7fa8d9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
}
.wrap { max-width: 840px; margin: 0 auto; padding: 0 20px 64px; }
a { color: inherit; }

.hero {
  position: relative;
  margin-bottom: 36px;
  padding: 48px 20px 36px;
  color: #fbfaf7;
  background: #0a0c10;
  overflow: hidden;
}
/* The cover photo sits in a height-capped band behind the hero, independent
   of how tall the text content makes the hero grow — this keeps the photo
   from being stretched/zoomed into an unrecognizable crop on narrow screens
   where the wrapped tagline makes the hero much taller than it is wide. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(180px, 42vw, 320px);
  background-size: cover;
  background-position: center 40%;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 16, 0.35) 0%, rgba(10, 12, 16, 0.75) 70%, #0a0c10 100%),
    url("/images/cover.jpg");
}
.hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.hero-photo {
  width: 108px; height: 108px; border-radius: 10px; object-fit: cover; object-position: top center;
  border: 2px solid rgba(255,255,255,0.35);
  flex: none;
}
.hero-text { flex: 1 1 320px; min-width: 0; }
.hero h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 6px; text-wrap: balance; }
.hero .role { font-size: 1.05rem; opacity: 0.95; margin: 0 0 4px; }
.hero .degrees { font-size: 0.9rem; opacity: 0.8; margin: 0 0 10px; }
.hero .tagline { font-size: 0.95rem; max-width: 56ch; opacity: 0.92; margin: 0 0 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  color: #fbfaf7;
}
.chip:hover { background: rgba(255,255,255,0.22); }

nav.toc {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 28px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
}
nav.toc a { color: var(--text-muted); text-decoration: none; }
nav.toc a:hover { color: var(--accent); }

section { margin: 0 0 40px; }
h2.section-title {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
h3.section-heading { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 14px; }

ul.plain, ol.plain { margin: 0; padding-left: 1.2em; }
ul.plain li, ol.plain li { margin-bottom: 10px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px 16px;
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head svg { width: 17px; height: 17px; stroke: var(--accent); flex: none; }
.card-head .name { font-weight: 600; }
.name-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; flex: 1 1 auto; text-align: left;
}
.name-btn:hover .name { color: var(--accent); }

.back-to-site {
  display: none; font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  text-decoration: none; margin-bottom: 10px;
}

/* Focus mode: a single category fills the page like its own view, with
   everything else (hero, static sections, other categories) hidden. */
body.focus-mode .hero,
body.focus-mode nav.toc,
body.focus-mode #research,
body.focus-mode #education,
body.focus-mode #experience,
body.focus-mode #publications,
body.focus-mode #conferences,
body.focus-mode #life,
body.focus-mode #contact,
body.focus-mode footer { display: none; }
body.focus-mode #uploads > p { display: none; }
body.focus-mode .card-grid { display: block; }
body.focus-mode .card { display: none; }
body.focus-mode .card.active-card { display: block; padding: 20px; }
body.focus-mode .card.active-card .back-to-site { display: inline-block; }

.btn {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; display: inline-block;
  text-decoration: none;
}
.btn:hover { background: var(--accent); color: var(--bg); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-ghost {
  font-family: var(--mono); font-size: 0.7rem; background: none; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger:hover { border-color: #c0463a; color: #c0463a; }
.tree-file .file-tools { margin-left: auto; display: flex; gap: 4px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--mono); font-size: 0.74rem; }
.breadcrumb .crumb {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--accent); font-family: var(--mono); font-size: 0.74rem;
}
.breadcrumb .crumb:disabled { color: var(--text-muted); cursor: default; }
.breadcrumb .crumb-sep { color: var(--text-muted); }

.tree { margin-top: 4px; font-size: 0.86rem; }
.tree ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tree > ul { margin-top: 0; }
.tree ul ul { margin-left: 16px; border-left: 1px solid var(--border); padding-left: 10px; }
.tree .empty, .tree .loading { color: var(--text-muted); font-style: italic; }
.tree .error { color: #c0463a; }
.tree-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 0;
  font-family: var(--sans); font-size: 0.86rem; color: var(--text); cursor: pointer; text-align: left;
}
.tree-toggle .chev { display: inline-block; width: 9px; transition: transform .15s ease; color: var(--text-muted); }
.tree-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.tree-toggle svg { width: 14px; height: 14px; stroke: var(--accent); flex: none; }
.tree-file { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.tree-file svg { width: 13px; height: 13px; stroke: var(--text-muted); flex: none; }
.tree-file a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.tree-file a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.tree-row { display: flex; align-items: center; }
.tree-tools { display: inline-flex; gap: 4px; margin-left: 6px; }
.inline-form { display: flex; gap: 6px; margin: 6px 0 6px 20px; }
.inline-form input {
  flex: 1; min-width: 100px; font-family: var(--sans); font-size: 0.82rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
.inline-form button {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; background: var(--accent);
  color: var(--bg); border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer;
}

.card-status { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.card-status.error { color: #c0463a; }

.admin-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-size: 1rem; line-height: 1; opacity: 0.55; transition: opacity .15s ease;
}
.admin-toggle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }

.admin-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 20px; background: var(--surface); border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.75rem;
}
.admin-bar.hidden, .admin-bar[hidden] { display: none; }

.admin-login-form { display: flex; gap: 6px; align-items: center; }
.admin-login-form input {
  font-family: var(--sans); font-size: 0.82rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; width: 160px;
}

.life-block { margin: 0 0 28px; }
.life-block:last-child { margin-bottom: 0; }
.life-block h4 {
  font-family: var(--serif); font-size: 1.1rem; margin: 0 0 6px; color: var(--text);
}
.life-block p { margin: 0 0 10px; }
.life-img {
  max-width: 100%; border-radius: 10px; border: 1px solid var(--border);
  display: block; margin-top: 8px;
}
.life-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.life-gallery .life-img { margin-top: 0; width: 100%; height: 220px; object-fit: cover; }

footer { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }

@media (max-width: 480px) {
  .wrap { padding: 0 16px 48px; }
  .hero-inner { align-items: flex-start; }
  .hero { padding: 36px 16px 28px; }
  .hero-photo { width: 84px; height: 84px; }
  nav.toc { gap: 6px 14px; margin-bottom: 22px; }
  .card-grid { grid-template-columns: 1fr; }
  .life-gallery { grid-template-columns: 1fr; }
  .admin-toggle { width: 30px; height: 30px; right: 12px; bottom: 12px; font-size: 0.9rem; }
  .admin-bar { padding: 8px 12px; flex-wrap: wrap; justify-content: center; }
  .admin-login-form input { width: 130px; }
}