/* Two-column personal homepage */

:root {
  --accent: #224b8d;        /* jemdoc link blue */
  --accent-dark: #022b6d;
  --menu-link: #527bbd;
  --menu-bg: #f6f6f6;
  --text: #222;
  --muted: #555;
  --rule: #d9d9d9;
  --sidebar: 320px;
  --gap: 44px;
}

* { box-sizing: border-box; }

html { background: #fff; }

body {
  margin: 0;
  padding: 32px 40px 56px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: none; border-bottom: 1px dotted gray; }

/* ---------- top menu bar (as in the original jemdoc layout) ---------- */

#topnav {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 10px 8px;
  background: var(--menu-bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
#topnav a {
  color: var(--menu-link);
  padding: 4px 14px;
  text-decoration: none;
  border-bottom: none;
}
#topnav a:hover { color: var(--accent-dark); }

.page {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--gap);
  align-items: start;
}

/* name sits alone in row 1; photo (sidebar) and bio (main) both start at row 2, so their top edges align */
.name    { grid-column: 1; grid-row: 1; }
.sidebar { grid-column: 1; grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; margin-top: -5px; }  /* cancel the half-leading so the first line sits on the photo top edge */

/* ---------- left column ---------- */

.name {
  margin: 0 0 18px;
  font-size: 1.7em;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar .photo {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.sidebar .title { margin: 16px 0 0; }
.sidebar .contact { margin: 22px 0 0; }
.sidebar .contact p { margin: 0; }

.sidebar h2 {
  margin: 36px 0 10px;
  font-size: 1.25em;
  font-weight: 700;
}

.news p { margin: 0 0 16px; }
.news .more { margin-top: 8px; }
#news-older { display: none; }

/* ---------- right column ---------- */

.main > p:first-child { margin-top: 0; }
.main p { margin: 0 0 20px; }

.main h2 {
  margin: 40px 0 14px;
  font-size: 1.5em;
  font-weight: 700;
  color: #333;
}
.main h2:first-of-type { margin-top: 12px; }

.main h3 {
  margin: 24px 0 8px;
  font-size: 1.25em;
  font-weight: 700;
  color: #444;
}

.main ul { margin: 0 0 8px; padding-left: 20px; }
.main li { margin-bottom: 10px; }

/* publications */
ul.papers li { margin-bottom: 24px; }
ul.papers .ptitle { font-weight: 700; }
ul.papers .venue { font-style: italic; }
ul.papers .links a { margin-right: 2px; }

footer {
  max-width: 1100px;
  margin: 72px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--muted);
  font-size: 0.9em;
}

/* ---------- narrow screens: stack ---------- */

@media (max-width: 1000px) {
  body { padding: 24px 20px 48px; font-size: 17px; }
  .page { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
  .name, .sidebar, .main { grid-column: 1; grid-row: auto; }
  .name { margin-bottom: 0; }
  .sidebar .photo { max-width: 420px; }

}