:root {
  --ink: #242a30;
  --muted: #68727b;
  --line: #e3e6e8;
  --accent: #255c6d;
  --accent-hover: #173d49;
  --cv-accent: #1f3a5f;
  --paper: #fff;
  /* Main type scale; Education has a compact override below. */
  --font-name: 40px;
  --font-section: 24px;
  --font-body: 18px;
  --font-small: 16px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--font-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
p { margin: 0 0 14px; }
.container { width: min(100% - 80px, 1080px); margin-inline: auto; }
.skip { position: absolute; top: -100px; left: 16px; padding: 8px 16px; background: white; z-index: 5; }
.skip:focus { top: 12px; }
.site-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 76px; padding-top: 64px; }
.content { min-width: 0; }
.sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
  padding: 0 12px 12px 0;
}
.identity { display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); }
.identity:hover { text-decoration: none; }
.avatar { display: block; width: 168px; height: auto; aspect-ratio: auto 472 / 630; object-fit: contain; object-position: center top; margin-bottom: 20px; }
.avatar-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f3f1;
  color: #60766e;
  font-family: var(--serif);
  font-size: var(--font-name);
  font-weight: 400;
  letter-spacing: -3px;
}
.sidebar-name { font-weight: 650; font-size: var(--font-section); line-height: 1.5; }
.sidebar-native { font-size: var(--font-body); font-weight: 400; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.position { font-size: 13px; margin: 9px 0 2px; }
.affiliation, .location { color: var(--muted); font-size: var(--font-body); margin: 0; line-height: 1.8; }
.affiliation { font-size: 13px; }
.section-nav { display: flex; flex-wrap: wrap; gap: 4px 15px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; }
.section-nav a { font-size: var(--font-small); line-height: 1.8; }
.sidebar .section { margin-top: 28px; }
.sidebar .section h2 { font-family: var(--sans); font-size: var(--font-section); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 650; color: var(--muted); margin-bottom: 17px; padding-bottom: 12px; }
.sidebar .timeline li { display: flex; flex-direction: column; gap: 5px; padding: 0 0 20px; border: none; }
.sidebar .timeline .period { order: 1; font-size: var(--font-body); }
.sidebar .timeline .main { font-size: var(--font-body); font-weight: 550; }
.sidebar .timeline .institution, .sidebar .timeline .detail { font-size: var(--font-body); }
/* Education keeps its original compact scale, independent of the main content. */
#education { --font-section: 11px; --font-body: 13px; }
#education .timeline .institution, #education .timeline .detail { font-size: 12px; }
#education .timeline .period { font-size: 11px; }
.hero { padding: 1px 0 28px; }
.hero h1, .page-header h1 { font-family: var(--serif); font-size: var(--font-name); font-weight: 400; line-height: 1.2; letter-spacing: -1.4px; margin: 0 0 18px; }
.hero h1 { font-family: var(--sans); font-weight: 700; color: #000; }
.native { font-family: var(--sans); font-size: var(--font-section); color: var(--muted); letter-spacing: 0; margin-left: 15px; display: inline-block; vertical-align: middle; font-weight: 400; }
.bio { font-size: var(--font-body); line-height: 1.85; }
.bio p:last-child { margin-bottom: 0; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: var(--font-body); font-weight: 600; }
.section { margin-top: 36px; scroll-margin-top: 32px; }
#about { scroll-margin-top: 32px; }
.section h2 { font-family: var(--serif); font-size: var(--font-section); font-weight: 400; line-height: 1.4; letter-spacing: -.4px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin: 0 0 20px; }
.section p:last-child { margin-bottom: 0; }
.interests { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.interest { display: inline-flex; align-items: center; gap: 9px; font-size: var(--font-body); }
.interest::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.content .section h2 { font-family: var(--sans); font-size: var(--font-section); font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--cv-accent); border-bottom-color: var(--cv-accent); padding-bottom: 8px; }
.cv-entry { display: grid; grid-template-columns: minmax(0, 3fr) minmax(112px, 1fr); gap: 22px; align-items: start; padding-block: 12px; }
.cv-entry:first-of-type { padding-top: 0; }
.cv-entry:last-child { padding-bottom: 0; }
.cv-entry-date { color: #555; font-size: var(--font-body); text-align: right; line-height: 1.6; padding-top: 1px; }
.pub-title, .project-title { font-family: var(--sans); font-size: var(--font-body); font-weight: 700; line-height: 1.55; margin: 0 0 3px; }
.pub-number { font-weight: 400; }
.pub-authors { font-size: var(--font-body); line-height: 1.65; }
.pub-author-self { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pub-venue { color: #555; font-size: var(--font-small); margin-top: 3px; }
.pub-venue a { color: inherit; }
.pub-note { color: #555; font-size: var(--font-small); margin-top: 2px; }
.pub-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--font-small); margin-top: 2px; }
.pub-date .year { display: block; font: inherit; }
.pub-status { display: block; color: var(--cv-accent); font-size: var(--font-body); font-weight: 700; }
.project-collaborator { font-size: var(--font-body); font-style: italic; margin: 0 0 5px; }
.project-detail { font-size: var(--font-small); line-height: 1.8; }
.project-detail p { margin-bottom: 8px; }
.period, .news-date { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--font-body); font-variant-numeric: tabular-nums; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 13px 0; }
.timeline li:first-child { padding-top: 0; }
.timeline li:last-child { padding-bottom: 0; }
.period { padding-top: 3px; }
.timeline .main { font-weight: 600; font-size: var(--font-body); line-height: 1.6; }
.timeline .institution { font-size: var(--font-body); }
.timeline .detail { color: var(--muted); font-size: var(--font-body); margin-top: 4px; }
.news-item { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 7px 0; font-size: var(--font-body); }
.news-date { padding-top: 3px; }
.news-item p { margin: 0; }
.experience-entry { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 55fr) minmax(0, 20fr); gap: 18px; align-items: start; padding-block: 12px; }
.experience-entry:first-child { padding-top: 0; }
.experience-entry:last-child { padding-bottom: 0; }
.experience-role { margin: 0; font-size: var(--font-body); font-weight: 700; line-height: 1.75; }
.experience-body { font-size: var(--font-body); line-height: 1.75; }
.experience-body p { margin: 0 0 6px; }
.experience-period { color: #555; font-size: var(--font-body); }
.experience-list > .teaching-list:not(:first-child) { margin-top: 24px; }
.teaching-groups { grid-column: 2 / -1; min-width: 0; }
.teaching-institution-group { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 20fr); gap: 18px; padding-block: 8px; }
.teaching-institution-group:first-child { padding-top: 0; }
.teaching-institution-group:last-child { padding-bottom: 0; }
.teaching-courses { list-style: none; padding: 0; margin: 0; }
.teaching-courses li { padding-bottom: 8px; font-size: var(--font-body); line-height: 1.75; }
.teaching-courses li:last-child { padding-bottom: 0; }
.teaching-term { white-space: nowrap; }
.experience-institution { color: #555; font-size: var(--font-body); font-style: italic; text-align: right; }
.skill-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding-block: 6px; }
.skill-row h3, .skill-row p { margin: 0; font-size: var(--font-body); }
.skill-row h3 { font-weight: 600; }
.page-header { margin-bottom: 24px; }
.footer { display: flex; justify-content: flex-end; gap: 20px; border-top: 1px solid var(--line); margin-top: 64px; padding-block: 20px 36px; font-size: var(--font-small); color: var(--muted); }
.pub-title, .pub-authors, .project-title, .project-detail, .teaching-courses, .experience-role, .experience-institution, .timeline .detail, .bio, .affiliation { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .container { width: min(100% - 48px, 1080px); }
  .site-layout { grid-template-columns: 195px minmax(0, 1fr); gap: 40px; padding-top: 40px; }
  .timeline li { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 40px, 560px); }
  .site-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
  .sidebar { position: static; max-height: none; overflow: visible; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
  .identity { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; }
  .avatar { width: 76px; margin-bottom: 12px; grid-row: 1 / 5; }
  .avatar-placeholder { letter-spacing: -1px; }
  .sidebar-native { display: block; margin-left: 0; }
  .position { margin-top: 0; }
  .section-nav { margin-top: 16px; padding-top: 14px; gap: 5px 18px; }
  .sidebar .section { margin-top: 24px; }
  .sidebar .timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sidebar .timeline li { padding-bottom: 0; }
  .hero { padding-top: 0; padding-bottom: 0; }
  .hero h1 { letter-spacing: -1px; }
  .native { margin-left: 10px; }
  .section { margin-top: 32px; }
  .cv-entry { grid-template-columns: minmax(0, 1fr); gap: 7px; padding-block: 16px; }
  .cv-entry-date { grid-row: 1; }
  .experience-entry { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 18px; }
  .teaching-groups { grid-column: auto; }
  .teaching-institution-group { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .footer { margin-top: 40px; }
}
@media (max-width: 400px) {
  .container { width: calc(100% - 32px); }
  .sidebar .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .skill-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}