/* ============================================================
   style.css — Katie Zhang academic website
   Colours live entirely in CSS custom properties below.
   To change the theme, edit the :root and [data-theme="dark"]
   blocks — nothing else needs touching.
   ============================================================ */

/* ── Colour tokens ── */
:root {
  /* Light theme — warm paper, environmental greens */
  --paper:       #faf8f3;
  --paper-tint:  #f3f0e6;
  --ink:         #1a2419;
  --ink-soft:    #3a4a3a;
  --muted:       #6b7a6b;
  --rule:        #e3e0d6;
  --rule-soft:   #ecead9;

  --moss:        #2d6a4f;   /* primary accent */
  --moss-deep:   #1b4332;   /* hover / strong */
  --moss-mid:    #74c69d;   /* mid accent */
  --moss-wash:   #d8f3dc;   /* light wash */
  --moss-paper:  #eef6ee;   /* card bg */

  --max-w:  760px;
  --nav-h:  56px;

  --shadow-sm: 0 1px 2px rgba(28,50,28,.04), 0 0 0 1px rgba(28,50,28,.04);
  --shadow-md: 0 4px 20px rgba(28,50,28,.06), 0 0 0 1px rgba(28,50,28,.05);
}

html[data-theme="dark"] {
  /* Night theme — warm charcoal with jade & gold accents */
  --paper:       #1e1d1b;   /* dark charcoal */
  --paper-tint:  #181715;
  --ink:         #e0d8c0;   /* mist cream */
  --ink-soft:    #cdc4a8;
  --muted:       #8a9a90;   /* fog grey-green */
  --rule:        rgba(224,216,192,.12);
  --rule-soft:   rgba(224,216,192,.07);

  --moss:        #3a8a6a;   /* jade */
  --moss-deep:   #2a6a5a;   /* malachite */
  --moss-mid:    #4d9d7a;
  --moss-wash:   rgba(42,106,90,.18);
  --moss-paper:  rgba(42,106,90,.10);

  --gold:        #c8b878;   /* highlight */

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(224,216,192,.06);
  --shadow-md: 0 4px 22px rgba(0,0,0,.40), 0 0 0 1px rgba(224,216,192,.07);
}

/* ── Dark-mode overrides ── */

/* Divider variants */
.divider-night { display: none; }
html[data-theme="dark"] .divider-day   { display: none; }
html[data-theme="dark"] .divider-night { display: block; }

/* Nav active tab */
html[data-theme="dark"] .nav-links a.active          { color: var(--gold); }
html[data-theme="dark"] .nav-links a.active::after   { background: var(--gold); }

/* Bio highlight */
html[data-theme="dark"] .hero-text .bio strong {
  background: linear-gradient(to top, rgba(200,184,120,.22) 30%, transparent 30%);
  color: var(--ink);
}

/* JMP stat + eyebrow */
html[data-theme="dark"] .jmp-finding .stat { color: var(--gold); }
html[data-theme="dark"] .jmp-eyebrow       { color: var(--moss-mid); }

/* Timeline dot */
html[data-theme="dark"] .timeline-item:first-child .timeline-dot {
  background:  var(--gold);
  box-shadow:  0 0 0 3px var(--paper), 0 0 0 5px rgba(200,184,120,.25);
}
html[data-theme="dark"] .timeline-dot { box-shadow: 0 0 0 3px var(--paper); }

/* CV button (bottom, standalone) */
html[data-theme="dark"] .cv-button       { background: var(--moss); color: #0d1410; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
html[data-theme="dark"] .cv-button:hover { background: var(--moss-deep); }

/* CV button (hero social row) — stays icon-style, no fill, to match the other icons */
html[data-theme="dark"] .social-row .cv-button {
  background: none;
  color: var(--muted);
  box-shadow: none;
}
html[data-theme="dark"] .social-row .cv-button:hover {
  background: var(--moss-paper);
  color: var(--moss-mid);
}

/* Paper pill links */
html[data-theme="dark"] .paper-links a:hover { color: var(--paper); }

/* Divider day-shape colours when rendered in dark */
html[data-theme="dark"] .divider svg .hill-1 { fill: #2a6a5a; opacity: .55; }
html[data-theme="dark"] .divider svg .hill-2 { fill: #1f4a44; opacity: .70; }
html[data-theme="dark"] .divider svg .hill-3 { fill: #181715; opacity: .90; }
html[data-theme="dark"] .divider svg .sun    { fill: #c8b878; opacity: .55; }

/* ── Base reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: .95rem;
  padding-top: var(--nav-h);
  transition: background .3s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--moss-wash); color: var(--moss-deep); }

/* ── Sticky nav ── */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  transition: background .3s ease, border-color .3s ease;
}

.nav-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
}

.nav-monogram {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--moss);
  text-decoration: none;
  padding: .4rem .5rem;
  flex-shrink: 0;
}
.nav-monogram em { font-style: normal; }

.nav-links {
  display: flex;
  align-items: center;
  gap: .1rem;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .7rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .005em;
  transition: color .2s, background .2s;
  position: relative;
}
.nav-links a:hover { color: var(--moss); background: var(--moss-paper); }
.nav-links a.active { color: var(--moss-deep); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: var(--moss);
  border-radius: 2px;
}
.nav-links svg {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--moss); border-color: var(--moss-mid); background: var(--moss-paper); }
.theme-toggle svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* ── Hero ── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  display: flex;
  gap: 2.2rem;
  align-items: flex-start;
}

.avatar-wrap { position: relative; flex-shrink: 0; }

.avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--paper);
  box-shadow: var(--shadow-md);
}

.avatar-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--moss-mid);
  opacity: .5;
  pointer-events: none;
}

.hero-text { flex: 1; min-width: 0; }

.hero-text h1 {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -.022em;
  line-height: 1.1;
  margin-bottom: .25rem;
}

.hero-text .subtitle {
  color: var(--moss);
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: .85rem;
  letter-spacing: .005em;
}
.hero-text .subtitle .dot {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--moss-mid);
  border-radius: 50%;
  margin: 0 .45rem;
  vertical-align: middle;
}

.hero-text .bio {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.hero-text .bio strong {
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(to top, var(--moss-wash) 30%, transparent 30%);
  padding: 0 2px;
}

.social-row {
  display: flex;
  gap: .3rem;
  margin-top: 1rem;
  align-items: center;
}
.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  color: var(--muted);
  transition: all .2s;
  text-decoration: none;
}
.social-row a:hover { color: var(--moss); background: var(--moss-paper); }
.social-row .cv-button {
  background: none;
  box-shadow: none;
  padding: 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: 6px;
  width: auto;
  height: 32px;
  padding: 0 6px;
  letter-spacing: normal;
}
.social-row .cv-button:hover { background: var(--moss-paper); color: var(--moss); transform: none; box-shadow: none; }
.social-row svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ── News strip ── */
.news {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: .5rem 1.5rem 1rem;
}
.news-inner {
  border-left: 2px solid var(--moss-mid);
  padding: .4rem 0 .4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.news-item {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .83rem;
  color: var(--ink-soft);
}
.news-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--muted);
  flex-shrink: 0;
  width: 64px;
  letter-spacing: -.01em;
}
.news-item a {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.news-item a:hover { border-color: var(--moss); }

/* ── SVG Dividers ── */
.divider {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

/* Shan shui mountain dividers — night mode only */
.divider-night svg .peak-far  { fill: #3a8a6a; opacity: .22; }
.divider-night svg .peak-mid  { fill: #2a6a5a; opacity: .50; }
.divider-night svg .peak-near { fill: #1e1d1b; opacity: .95; }
.divider-night svg .moon      { fill: #c8b878; opacity: .70; }
.divider-night svg .moon-glow { fill: #c8b878; opacity: .15; }
.divider-night svg .moon-ring { fill: none; stroke: #c8b878; stroke-width: .6; opacity: .3; }
.divider-night svg .mist      { fill: #e0d8c0; opacity: .06; }

/* ── Sections ── */
section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.75rem 1.5rem;
}

.section-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule), transparent);
}
.section-title .icon-wrap {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--moss-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-title svg {
  width: 16px; height: 16px;
  stroke: var(--moss); stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ── JMP card ── */
.jmp-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.jmp-card {
  background: var(--moss-paper);
  border: 1px solid var(--moss-wash);
  border-left: 3px solid var(--moss);
  border-radius: 10px;
  padding: 1.6rem 1.7rem;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.jmp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moss-deep);
  margin-bottom: .7rem;
}

.jmp-eyebrow .pulse {
  width: 6px; height: 6px;
  background: var(--moss);
  border-radius: 50%;
  position: relative;
}
.jmp-eyebrow .pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--moss);
  border-radius: 50%;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.6); opacity: 0; }
}

.jmp-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -.018em;
  margin-bottom: .4rem;
  text-wrap: balance;
}
.jmp-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--moss), var(--moss));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.jmp-title a:hover { background-size: 100% 1.5px; }

.jmp-meta {
  color: var(--muted);
  font-size: .83rem;
  margin-bottom: .85rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.01em;
}

.jmp-abstract {
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.7;
  text-wrap: pretty;
  margin-bottom: 1rem;
}

.jmp-finding {
  background: var(--paper);
  border-radius: 6px;
  padding: .7rem .95rem;
  margin-bottom: 1rem;
  font-size: .87rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.jmp-finding .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 500;
  color: var(--moss);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: .15rem;
}
.jmp-finding .stat {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  color: var(--moss-deep);
  font-size: 1.05em;
}

/* ── Paper entries ── */
.paper {
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.paper:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.paper-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: .25rem;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.paper-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--moss), var(--moss));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.paper-title a:hover { background-size: 100% 1.5px; }

.paper-meta {
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: .5rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.01em;
}
.paper-meta .status { color: var(--moss); font-weight: 500; }

.paper-abstract {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

.paper-links {
  display: flex;
  gap: .4rem;
  margin-top: .7rem;
  flex-wrap: wrap;
}
.paper-links a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .74rem;
  font-weight: 500;
  color: var(--moss);
  text-decoration: none;
  padding: .25rem .65rem;
  border: 1px solid var(--moss-mid);
  border-radius: 999px;
  background: transparent;
  transition: all .2s;
  font-family: 'Outfit', sans-serif;
  letter-spacing: .01em;
}
.paper-links a:hover {
  background: var(--moss);
  color: white;
  border-color: var(--moss);
  transform: translateY(-1px);
}
.paper-links a svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Research sub-headings (Works in progress / Other publications) ── */
.subsection-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 2.2rem 0 1.1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.section-title + .subsection-title { margin-top: 0; }
/* The paper just before a sub-heading doesn't need its divider rule */
.paper:has(+ .subsection-title) { border-bottom: none; }

/* ── Collapsible abstract (click "Abstract" to expand) ── */
.paper details.abstract summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--moss);
  list-style: none;
  user-select: none;
  transition: color .2s;
}
.paper details.abstract summary::-webkit-details-marker { display: none; }
.paper details.abstract summary::before {
  content: '';
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform .2s ease;
}
.paper details.abstract[open] summary::before { transform: rotate(90deg); }
.paper details.abstract summary:hover { color: var(--moss-deep); }
html[data-theme="dark"] .paper details.abstract summary:hover { color: var(--moss-mid); }
.paper details.abstract .paper-abstract { margin-top: .4rem; }

/* ── Teaching ── */
.course {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--rule);
  gap: 1rem;
}
.course:last-child { border-bottom: none; }

.course-name { font-weight: 500; font-size: .93rem; color: var(--ink); }
.course-name .code {
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  font-weight: 400;
  margin-left: .4rem;
}
.course-role {
  color: var(--muted);
  font-size: .8rem;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  text-align: right;
}

/* ── Education timeline ── */
.timeline { position: relative; padding-left: .5rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 3px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--rule);
}

.timeline-item {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.3rem;
  align-items: flex-start;
  position: relative;
}
.timeline-item:last-child { margin-bottom: 0; }

.timeline-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--moss-mid);
  margin-top: .5rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--paper);
  position: relative;
  z-index: 1;
}
.timeline-item:first-child .timeline-dot {
  background: var(--moss);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--moss-wash);
}

.timeline-content { flex: 1; }
.timeline-content h4 { font-weight: 500; font-size: .96rem; margin-bottom: .1rem; color: var(--ink); }
.timeline-content .where { color: var(--ink-soft); font-size: .86rem; }
.timeline-content .when {
  color: var(--muted);
  font-size: .76rem;
  font-family: 'JetBrains Mono', monospace;
  margin-top: .15rem;
  letter-spacing: -.01em;
}

/* ── CV section ── */
.cv-section { text-align: center; padding: 3rem 1.5rem 2rem; }

.cv-button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.6rem;
  background: var(--moss);
  color: var(--paper);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .005em;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(45,106,79,.15);
}
.cv-button:hover {
  background: var(--moss-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45,106,79,.22);
}
.cv-button svg {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.cv-meta {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .75rem;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Footer ── */
footer {
  max-width: var(--max-w);
  margin: 1rem auto 0;
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  color: var(--muted);
  font-size: .78rem;
  border-top: 1px solid var(--rule);
}
footer a { color: var(--moss); text-decoration: none; font-family: 'JetBrains Mono', monospace; }
footer a:hover { text-decoration: underline; }
footer .footer-meta {
  margin-top: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  opacity: .7;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    padding-top: 2rem;
  }
  .avatar { width: 96px; height: 96px; }
  .hero-text h1 { font-size: 1.75rem; }
  .nav-links span { display: none; }
  .nav-links a { padding: .45rem; }
  .nav-links svg { width: 17px; height: 17px; }
  .nav-monogram { font-size: .92rem; }
  .jmp-card { padding: 1.3rem 1.2rem; }
  .jmp-title { font-size: 1.18rem; }
  .news-date { width: 56px; font-size: .68rem; }
  .course { flex-direction: column; gap: .15rem; align-items: flex-start; }
  .course-role { text-align: left; }
  section { padding: 2rem 1.25rem; }
}