:root { --ink: #1a1a1a; --muted: #555; --blue: #5991f1; --line: #ddd; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: #fafafa;
  line-height: 1.6;
}
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* Left column */
h1 { font-size: 2.6rem; line-height: 1.1; font-weight: 400; }
h1 .zh { display: block; font-size: 2rem; margin-top: 6px; letter-spacing: 4px; }

.bio { margin-top: 28px; color: var(--muted); }

/* One style for every list */
.links { list-style: none; color: var(--muted);}
.links li {
  margin: 0;
  padding-left: 1.3em;
}
.links li::before {
  content: "›";
  display: inline-block;
  width: 1.3em;
  margin-left: -1.3em;
  color: #555;
}
.links li::before { content: "› "; color: var(--muted); }
.links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.links a:hover { color: var(--blue); }

.section-title { font-size: 1rem; font-weight: 400; margin: 44px 0 10px; }

/* Right column */
.photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #ececec url("photo.JPG") center/cover no-repeat;
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .wrap { grid-template-columns: 1fr; gap: 32px; }
  .photo { order: -1; max-width: 320px; }
}