/* =============================================================================
   Jiale Liu — Academic Site
   Ink & Parchment
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Ink — text & depth */
  --ink-950: #1a1f2e;
  --ink-800: #2d3348;
  --ink-600: #4e5468;
  --ink-400: #7d8399;
  --ink-200: #c4c7d1;

  /* Parchment — surfaces */
  --parchment-50: #faf8f4;
  --parchment-100: #f3f0e9;
  --parchment-200: #e8e4db;
  --paper: #fffefb;

  /* Sienna — primary accent */
  --sienna-700: #9e4a2e;
  --sienna-600: #b5563e;
  --sienna-500: #c96d54;
  --sienna-100: #f5e0d8;
  --sienna-50: #faf0ec;

  /* Olive — secondary accent (action links) */
  --olive-700: #4a6b4c;
  --olive-600: #5c7a5e;
  --olive-100: #dce8dc;
  --olive-50: #edf4ed;

  /* Amber — star badges */
  --amber-700: #8b6234;
  --amber-100: #f0e3d0;
  --amber-50: #faf3ea;

  /* Semantic tokens */
  --color-bg: var(--parchment-50);
  --color-surface: var(--paper);
  --text-primary: var(--ink-950);
  --text-body: var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --link: var(--sienna-600);
  --link-hover: var(--sienna-700);
  --border: var(--parchment-200);
  --rule: var(--parchment-200);

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing — 8px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --max-width: 800px;
}

html { font-size: 17px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--color-bg);
  line-height: 1.7;
  font-weight: 420;
  -webkit-font-smoothing: auto;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--link-hover); }

strong { font-weight: 620; color: var(--text-primary); }

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

main.container {
  padding-top: var(--s-16);
  padding-bottom: var(--s-20);
}

/* --- Hero --- */
.hero {
  display: flex;
  gap: var(--s-8);
  align-items: center;
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-10);
}

.hero-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.hero-photo-placeholder {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--parchment-100), var(--sienna-50));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sienna-600);
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
}

.hero-info h1 {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--s-1);
}

.hero-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-4);
  line-height: 1.4;
}

.hero-links {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.hero-links a {
  font-size: 0.8125rem;
  font-weight: 520;
  color: var(--sienna-700);
  padding: var(--s-1) var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.hero-links a:hover {
  background: var(--sienna-50);
  border-color: var(--sienna-100);
}

/* --- About --- */
.about {
  margin-bottom: var(--s-12);
  font-size: 1rem;
  line-height: 1.8;
}

.about p { margin-bottom: var(--s-4); }
.about p:last-child { margin-bottom: 0; }

/* --- Section headings & ruled-line motif --- */
h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

section + section {
  margin-top: var(--s-12);
}

/* --- Experience --- */
.exp-list {
  list-style: none;
}

.exp-item {
  padding: var(--s-3) 0;
}

.exp-item + .exp-item {
  border-top: 1px solid var(--parchment-100);
}

.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
}

.exp-title {
  font-size: 1rem;
  line-height: 1.45;
}

.exp-org {
  font-weight: 620;
  color: var(--text-primary);
}

.exp-role {
  color: var(--text-body);
}

.exp-period {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.exp-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--s-1);
  line-height: 1.6;
}

/* --- Publications --- */
.pub-legend {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-bottom: var(--s-5);
}

.pub-year {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pub-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.pub-list {
  list-style: none;
}

.pub-item {
  padding: var(--s-3) var(--s-4);
  border-radius: 4px;
  margin-bottom: var(--s-1);
  transition: background 0.1s ease;
}

.pub-item:hover {
  background: var(--color-surface);
}

.pub-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.45;
}

.pub-authors {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.55;
}

.pub-venue {
  font-size: 0.875rem;
  color: var(--text-body);
  margin-top: 2px;
}

.pub-venue em {
  font-style: normal;
  font-weight: 620;
  color: var(--ink-950);
}

.pub-note {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 620;
  color: var(--sienna-700);
  background: var(--sienna-50);
  border: 1px solid var(--sienna-100);
  padding: 1px var(--s-3);
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: 1px;
  letter-spacing: 0.01em;
}

.pub-note::before {
  content: "\2605 ";
  font-size: 0.6875rem;
}

.pub-links {
  margin-top: var(--s-1);
  display: flex;
  gap: var(--s-2);
}

.pub-links a {
  font-size: 0.8125rem;
  font-weight: 520;
  padding: 1px var(--s-2);
  border-radius: 3px;
  color: var(--olive-700);
  background: var(--olive-50);
  border: 1px solid var(--olive-100);
  transition: all 0.15s ease;
}

.pub-links a:hover {
  background: var(--olive-100);
}

/* --- Open Source --- */
.oss-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.oss-item {
  padding: var(--s-4) var(--s-5);
  background: var(--color-surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.oss-item:hover {
  border-color: var(--ink-200);
}

.oss-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-1);
}

.oss-header h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.oss-header h3 a { color: var(--text-primary); }
.oss-header h3 a:hover { color: var(--sienna-600); }

.oss-stars {
  font-size: 0.8125rem;
  font-weight: 620;
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  padding: 1px var(--s-2);
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.oss-item p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Footer --- */
.site-footer {
  padding: var(--s-10) 0 var(--s-8);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  border-top: 1px solid var(--rule);
}

.site-footer a {
  color: var(--text-tertiary);
}
.site-footer a:hover {
  color: var(--text-secondary);
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .container { padding: 0 var(--s-4); }
  main.container { padding-top: var(--s-10); }

  .hero {
    flex-direction: column;
    text-align: center;
    gap: var(--s-5);
  }

  .hero-photo, .hero-photo-placeholder {
    width: 104px;
    height: 104px;
  }

  .hero-info h1 { font-size: 1.75rem; }
  .hero-links { justify-content: center; }

  .exp-header {
    flex-direction: column;
    gap: var(--s-1);
  }

  .oss-header {
    flex-direction: column;
    gap: var(--s-1);
  }
}

/* --- Print --- */
@media print {
  body { background: #fff; }
  .site-footer { display: none; }
  main.container { padding-top: 0; }
  .hero-photo-placeholder { display: none; }
  a { color: var(--text-body); }
  .hero { border-bottom: none; }
  h2 { border-bottom: none; }
}