/* ============================================================
   Zixuan Zhao — academic site
   Warm paper ground + one confident accent (oxblood). Rules and
   solid borders carry separation instead of drop-shadows; nothing
   is pill-shaped. Newsreader (serif) + Work Sans, via Google Fonts.
   ============================================================ */

:root{
  --bg:        #f8f2e7;
  --bg-panel:  #fbf8f1;
  --bg-sunken: #f0e3cb;
  --ink:       #221b14;
  --ink-2:     #5a4f42;
  --ink-3:     #7d7160;
  --rule:      #e3d7c0;
  --rule-2:    #d0bfa0;

  --accent:    #7a2430;   /* oxblood — the one accent, used generously */
  --accent-2:  #9c6f1f;   /* deep ochre — second series */
  --accent-3:  #2f6b63;   /* ink-teal — third series, the one cool note */
  --accent-4:  #6b4a6e;   /* muted plum — fourth series */
  --accent-sf: #e9d9d1;   /* soft accent wash — selection highlight only */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --maxw: 1240px;
  --radius: 3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(122,36,48,.32)}
a:hover{border-bottom-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.22; letter-spacing:-.01em; margin:0}
code,kbd{font-family:var(--mono); font-size:.88em}
::selection{background:var(--accent-sf); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

.site-head{
  border-bottom:1px solid var(--rule); background:rgba(248,242,231,.92);
  backdrop-filter:saturate(150%) blur(8px); position:sticky; top:0; z-index:50;
}
.site-head .wrap{display:flex; align-items:baseline; gap:28px; height:64px}
.brand{font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); border:0; white-space:nowrap}
.brand:hover{border:0; color:var(--accent)}
.nav{margin-left:auto; display:flex; gap:26px}
.nav a{
  border:0; color:var(--ink-2); font-size:14.5px; letter-spacing:.01em;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}

.site-foot{
  margin-top:80px; border-top:1px solid var(--rule); padding:28px 0 56px;
  color:var(--ink-3); font-size:13.5px;
}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between}

/* ---------- page header ---------- */
.page-head{padding:56px 0 34px; border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(28px,4.2vw,44px); white-space:nowrap}
.page-head .lede{
  margin:16px 0 0; max-width:62ch; font-size:17.5px; color:var(--ink-2);
}
.eyebrow{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:16px;
  color:var(--accent); margin:0 0 10px;
}

/* three research questions, with pointers into the paper list below.
   Each question is meant to sit on a single line — the font size tracks the
   viewport so the longest one still fits, and wrapping returns below 1000px. */
.lede-list{margin:14px 0 0; padding:0; list-style:none}
.lede-list li{
  position:relative; padding-left:19px; margin-top:13px;
  font-size:clamp(13px,1.28vw,15.5px); line-height:1.62; color:var(--ink-3);
  white-space:nowrap;
}
.lede-list li::before{
  content:""; position:absolute; left:1px; top:.66em;
  width:6px; height:6px; background:var(--accent);
}
.lede-list .q{color:var(--ink); font-weight:600}
.q-refs{display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:5px}
.q-refs a{
  border:1.5px solid var(--ink); border-radius:var(--radius); padding:1px 10px;
  font-size:12.5px; color:var(--ink-2); background:var(--bg-panel); white-space:nowrap;
}
.q-refs a:hover{border-color:var(--accent); background:var(--accent); color:#fff}

/* ---------- research rows ---------- */
.paper{
  padding:52px 0; border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:44px; align-items:start;
  scroll-margin-top:80px;   /* clears the sticky header when jumped to by anchor */
}
.paper:last-of-type{border-bottom:0}
.paper-body{position:sticky; top:96px}

/* working papers: no viz, no abstract — the whole entry sits on one line */
.paper.paper-line{display:block; padding:28px 0}
.paper-line .p-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; margin:0;
}
.paper-line .num{
  flex:0 0 auto; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:21px; line-height:1; color:var(--accent);
}
.paper-line .p-line-title{
  flex:1 1 auto; min-width:0;
  font-family:var(--serif); font-size:16.5px; line-height:1.3; color:var(--ink);
}
.paper-line .p-line-meta{flex:0 0 auto; font-size:13px; color:var(--ink-3)}
.paper-line .p-line-meta .me{font-weight:700; color:var(--ink-2)}
.paper-line .p-line-meta em{font-style:normal; font-weight:600; color:var(--ink-2)}

.p-index{
  display:flex; align-items:baseline; gap:10px; margin-bottom:16px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.p-index .num{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:21px;
  color:var(--accent); letter-spacing:0; text-transform:none; line-height:1;
}
.p-title{font-size:23px; line-height:1.3; margin-bottom:9px}
.p-authors{font-size:14.5px; color:var(--ink-2); margin:0 0 4px}
.p-authors .me{font-weight:700; color:var(--ink)}
.p-venue{font-size:13.5px; color:var(--ink-3); margin:0 0 18px; font-style:italic}
.p-venue em{font-style:normal; font-weight:600; color:var(--ink-2)}
.p-hook{font-size:16.5px; color:var(--ink); margin:0 0 18px; max-width:56ch}

.p-links{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.p-links a{
  border:1.5px solid var(--ink); border-radius:var(--radius); padding:4px 13px;
  font-size:13px; color:var(--ink-2); background:var(--bg-panel);
}
.p-links a:hover{border-color:var(--accent); background:var(--accent); color:#fff}

details.abstract{border-top:1px solid var(--rule); padding-top:12px}
details.abstract summary{
  cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--accent);
  letter-spacing:.02em; display:flex; align-items:center; gap:7px;
}
details.abstract summary::-webkit-details-marker{display:none}
details.abstract summary::before{
  content:"+"; font-family:var(--mono); font-size:14px; width:15px; display:inline-block;
}
details.abstract[open] summary::before{content:"–"}
details.abstract p{
  font-size:14.2px; line-height:1.62; color:var(--ink-2); margin:12px 0 0; max-width:60ch;
}

/* ---------- viz panel ---------- */
.viz{
  background:var(--bg-panel); border:1.5px solid var(--ink); border-radius:var(--radius);
  overflow:hidden;
}
.viz-head{
  padding:14px 18px 12px; border-bottom:1px solid var(--rule); background:var(--bg-sunken);
}
.viz-head h3{font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.01em}
.viz-head p{margin:4px 0 0; font-size:12.8px; color:var(--ink-3); line-height:1.45}
.viz-canvas-wrap{padding:14px 16px 4px}
.viz canvas{display:block; width:100%; height:auto}

.controls{
  padding:12px 16px 16px; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;
  border-top:1px solid var(--rule);
}
.ctl{display:flex; flex-direction:column; gap:5px; min-width:0}
.ctl > label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.ctl .val{font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:600}
.ctl input[type=range]{width:132px; accent-color:var(--accent); margin:0}

.seg{display:inline-flex; border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; background:var(--bg-panel)}
.seg button{
  border:0; background:transparent; padding:5px 11px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer; border-right:1px solid var(--rule);
}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--bg-sunken)}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff; font-weight:600}

/* Long metric and population labels remain visible at the visualization width. */
#viz-mas .ctl,#viz-mrd .ctl{width:100%}
#viz-mas .seg,#viz-mrd .seg{display:flex; flex-wrap:wrap; width:100%}
#viz-mas .seg button{flex:1 1 30%}
#viz-mrd .seg button{flex:1 1 46%; white-space:normal}

button.run{
  border:1.5px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-size:13px;
  font-weight:600; padding:7px 17px; border-radius:var(--radius); cursor:pointer;
}
button.run:hover{background:#5c1b24}
button.run:disabled{opacity:.55; cursor:progress}
button.ghost{
  border:1.5px solid var(--ink); background:var(--bg-panel); color:var(--ink-2); font:inherit;
  font-size:13px; padding:7px 14px; border-radius:var(--radius); cursor:pointer;
}
button.ghost:hover{border-color:var(--accent); color:var(--accent)}

.readout{
  padding:0 16px 16px; display:flex; flex-wrap:wrap; gap:8px 26px;
  font-size:12.8px; color:var(--ink-2);
}
.readout b{font-family:var(--mono); font-weight:600; color:var(--ink); font-size:12.5px}
.viz-note{
  padding:11px 16px 14px; border-top:1px solid var(--rule); background:var(--bg-sunken);
  font-size:12px; color:var(--ink-3); line-height:1.5;
}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; padding:2px 16px 12px; font-size:12.2px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:2px; display:inline-block}

.tip{
  position:fixed; z-index:80; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--bg); border-radius:var(--radius); padding:8px 11px; font-size:12.2px;
  line-height:1.45; max-width:270px;
}
.tip b{display:block; font-size:12.6px; margin-bottom:3px}
.tip.on{opacity:1}

/* ---------- generic content ---------- */
.prose{max-width:68ch; padding:40px 0}
.prose h2{font-size:24px; margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 15px; color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 15px; padding-left:22px; color:var(--ink-2)}
.prose li{margin-bottom:7px}

.cols{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:52px; padding:48px 0}
.idcard{position:sticky; top:96px}
.idcard .photo{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius); object-fit:cover;
  background:var(--bg-sunken); border:1.5px solid var(--ink); display:block;
}
.idcard .photo-ph{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius); border:1px dashed var(--rule-2);
  background:var(--bg-sunken); display:grid; place-items:center; color:var(--ink-3);
  font-size:13px; text-align:center; padding:20px;
}
.idcard h2{font-size:26px; margin:18px 0 3px}
.idcard .role{color:var(--ink-2); font-size:15px; margin:0 0 2px}
.idcard .dept{color:var(--ink-3); font-size:14px; margin:0 0 16px}
.meta-list{list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--rule); font-size:14px}
.meta-list li{display:flex; gap:10px; margin-bottom:9px; color:var(--ink-2)}
.meta-list .k{color:var(--ink-3); min-width:64px; flex:none; font-size:13px}

.tags{display:flex; flex-wrap:wrap; gap:7px 20px; margin:6px 0 0; padding:0; list-style:none}
.tags li{
  font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--accent);
  text-decoration:underline; text-decoration-color:rgba(122,36,48,.35); text-underline-offset:3px;
}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{
  padding:0 0 20px 22px; border-left:2px solid var(--rule); position:relative; margin-left:3px;
}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:-6px; top:9px; width:9px; height:9px;
  background:var(--bg); border:2px solid var(--accent); transform:rotate(45deg);
}
.timeline .yr{font-family:var(--mono); font-size:12px; color:var(--ink-3); display:block; margin-bottom:2px}
.timeline .deg{font-weight:600; color:var(--ink)}
.timeline .place{color:var(--ink-2); font-size:14.5px}
.timeline .sub{color:var(--ink-3); font-size:13.5px; margin-top:3px}

.entries{list-style:none; margin:0; padding:0; counter-reset:e}
.entries li{
  padding:15px 0 15px 40px; border-bottom:1px solid var(--rule); position:relative; counter-increment:e;
}
.entries li:last-child{border-bottom:0}
.entries li::before{
  content:counter(e); position:absolute; left:0; top:13px; font-family:var(--serif); font-style:italic;
  font-weight:600; font-size:16px; color:var(--accent); width:28px; text-align:right;
}
.entries .t{color:var(--ink); font-weight:600; font-size:15px}
.entries .d{color:var(--ink-2); font-size:14px; margin-top:3px}
.pill{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:14.5px; color:var(--accent);
}
.pill::after{content:" — "; font-family:var(--sans); font-style:normal; color:var(--ink-3)}
.pill.warm{color:var(--accent-2)}
.pill.green{color:var(--accent-3)}

.thread{
  background:var(--bg-panel); border:1.5px solid var(--ink); border-radius:var(--radius);
  padding:22px 26px; margin:34px 0 0;
}
.thread h3{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.thread p{margin:0; color:var(--ink-2); font-size:15px; max-width:74ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .paper{grid-template-columns:1fr; gap:26px}
  .paper-body{position:static}
  .cols{grid-template-columns:1fr; gap:34px; padding:34px 0}
  .idcard{position:static; max-width:340px}
}
@media (max-width:1000px){
  /* not enough room for one-line questions — wrap them at a readable size */
  .lede-list{max-width:74ch}
  .lede-list li{white-space:normal; font-size:15.5px}
}

@media (max-width:560px){
  /* too narrow to hold a title on one line — let it wrap again */
  .page-head h1{white-space:normal; font-size:clamp(24px,7vw,30px)}
}

@media (max-width:640px){
  .wrap{padding:0 18px}
  .site-head .wrap{height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; gap:6px 18px}
  .nav{margin-left:0; width:100%; gap:18px}
  .page-head{padding:34px 0 24px}
  .paper{padding:36px 0}
  .controls{gap:12px 14px}
  .ctl input[type=range]{width:110px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}