/* ---------------------------------------------------------------
   Editorial refresh for xuganchen.com.
   Monotypographic — Newsreader (variable serif, optical sizes).
   Layered over Flex's structural CSS; overrides typography,
   color palette, and the working-papers section.
   --------------------------------------------------------------- */

:root {
  --paper:    #fbf9f4;        /* warm off-white, body bg */
  --ink:      #1a1815;        /* deep ink, body text */
  --rule:     #d9d3c2;        /* hairline rules, paper-warm */
  --muted:    #6b6759;        /* secondary text */
  --cream:    #f4ecd8;        /* sidebar text on Yale blue */
  /* --theme-color is injected from pelicanconf.py (Yale blue). */
}

/* ---------- Typography ---------- */

html, body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", "Charter", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Newsreader", "Charter", Georgia, serif;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
}

a {
  color: var(--theme-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover {
  color: var(--theme-color);
  border-bottom-color: var(--theme-color);
  background: none;
}

main article p,
main article ul,
main article ol {
  margin-block: 0.9em;
}

main article {
  margin: 3em 8% 4%;
}

/* ---------- Sidebar (kept as a cover-page block) ---------- */

aside {
  background-color: var(--theme-color);
  color: var(--cream);
}
aside a, aside a:hover {
  color: var(--cream);
  border-bottom-color: transparent;
}
aside div img {
  border-radius: 50%;
  max-width: 130px;
  border: 2px solid rgba(244, 236, 216, 0.18);
}
aside div h1 {
  font-family: "Newsreader", "Charter", Georgia, serif;
  font-variation-settings: "opsz" 18;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.4em;
  margin: 1em 0 0.2em;
}
aside div p {
  font-style: italic;
  font-size: 0.95em;
  color: rgba(244, 236, 216, 0.78);
  margin: 0 0 1.6em;
}

aside nav ul.list {
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
aside nav ul.list li a {
  display: inline-block;
  padding: 0.25em 0;
  border-bottom: 1px solid transparent;
}
aside nav ul.list li a:hover {
  border-bottom-color: rgba(244, 236, 216, 0.55);
}

/* ---------- Profile block (about page) ---------- */

.profile-name {
  text-align: center;
  font-variation-settings: "opsz" 60;
  font-weight: 300;
  letter-spacing: -0.005em;
  font-size: 2.4em;
  margin: 0.4em 0 0.6em;
}
.profile-name strong {
  font-weight: 500;
}

/* Photo floats to the right of the intro text (3:4 portrait sits beside
   the centered name + CV row + bio). Pure markdown — no wrappers needed. */
.profile-photo {
  float: right;
  width: 340px;
  max-width: 38%;
  margin: 0.4em 0 1.2em 2.5em;
  border-radius: 4px;
  filter: saturate(0.9) contrast(0.98);
}
/* The markdown image renders inside its own <p>; let that paragraph
   collapse so the photo sits right at the top of the article. */
main article > div > p:has(> .profile-photo:only-child) {
  margin: 0;
}
/* The Working Papers section must start below the floated photo. */
main article h4 {
  clear: both;
}
@media (max-width: 760px) {
  .profile-photo {
    float: none;
    display: block;
    margin: 0 auto 1.4em;
    width: 280px;
    max-width: 80%;
  }
}

.profile-links {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 2.6em;
  font-size: 0.96em;
}
.profile-links a {
  margin: 0 0.55em;
  color: var(--theme-color);
}

/* ---------- Section headings (h4 used for "Working Papers") ---------- */

main article h4 {
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3em 0 1.4em;
  padding-bottom: 0.55em;
  border-bottom: 1px solid var(--rule);
}

/* ---------- Working Papers list ---------- */

main article ul:has(li > p > a[href$=".pdf"]) {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

main article ul li {
  margin: 0;
  padding: 0.6em 0;
}

/* Paper title line. Works for both Markdown's loose mode (where the
   bullet content is wrapped in <p>) and tight mode (no <p>). */
main article ul li > p:first-child {
  margin: 0 0 0.4em;
}
main article ul li strong {
  font-weight: 600;
}
/* Title link + coauthor links inside the paper bullet — italic + dotted.
   Targets <a> direct children of the top-level <li> (tight mode) or its
   <p> (loose mode). Sub-bullet links (NBER, news) stay default. */
main article > div > ul > li > a,
main article > div > ul > li > p > a {
  font-style: italic;
  color: var(--ink);
  border-bottom: 1px dotted var(--muted);
}
main article > div > ul > li > a:hover,
main article > div > ul > li > p > a:hover {
  color: var(--theme-color);
  border-bottom-color: var(--theme-color);
}

/* Nested list under each working paper.
   Each sub-bullet on its own line. To put multiple links on a single
   line, write them in markdown separated by " | " — a small script in
   base.html converts the pipe to a middot at render time. */
main article ul li ul {
  list-style: none;
  padding-left: 0;
  margin: 0.4em 0 0;
  font-size: 0.86em;
  color: var(--muted);
}
main article ul li ul > li {
  border: none;
  padding: 0.1em 0;
  display: block;
}

/* ---------- Footer ---------- */

main footer {
  margin-top: 5em;
  padding-top: 1em;
  border-top: 1px solid var(--rule);
}
main footer p {
  text-align: left;
  padding: 0 8%;
  color: var(--muted);
  font-style: italic;
  font-size: 0.86em;
}

/* ---------- Code (inline + blocks, in case of future use) ---------- */

main article code,
main article pre {
  font-family: "Source Code Pro", "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}