/* ============================================================
   Yiran Wang — shared stylesheet
   One typeface throughout (EB Garamond); hierarchy comes from
   weight, size and letter-spacing only.
   ============================================================ */
:root{
  --ink:#1a1a1a;
  --muted:#6b6b6b;
  --rule:#e3e0da;
  --bg:#fdfcfa;
  --blue:#2d5a8e;        /* link / accent blue */
  --blue-dark:#1e3f66;   /* hover */
  --measure:46rem;
  --serif:"EB Garamond","Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);
  font-size:19px;line-height:1.62;
  font-feature-settings:"liga","kern";-webkit-font-smoothing:antialiased;
}
.wrap{max-width:64rem;margin:0 auto;padding:2.4rem 2rem 7rem}
a{color:var(--blue);text-decoration:none;transition:color .15s,border-color .15s}
a:hover{color:var(--blue-dark)}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--rule);
  padding:0 0 1.1rem;margin-bottom:1.8rem;
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;
  font-size:.88rem;letter-spacing:.09em;text-transform:uppercase;
}
.topbar .home{font-weight:600;color:var(--muted)}
.topbar .home:hover{color:var(--blue)}
.topbar nav{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline}
.topbar nav a{color:var(--muted)}
.topbar nav a:hover{color:var(--blue)}
.topbar nav a.current{color:var(--ink);border-bottom:1px solid var(--blue);padding-bottom:2px}

/* ---------- masthead ---------- */
header.masthead{display:flex;gap:3rem;align-items:flex-start;flex-wrap:wrap}
.intro{flex:1 1 24rem;min-width:0;display:flex;flex-direction:column;order:1}
.photo{
  /* natural aspect ratio preserved — nothing is cropped or stretched */
  order:2;flex:0 0 240px;width:240px;align-self:flex-start;
  background:#f1eee8;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  color:#b9b3a8;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;overflow:hidden;
}
.photo:not(:has(img)){min-height:270px;padding:.5rem}
.photo img{width:100%;height:auto;display:block}

h1{font-size:2.5rem;font-weight:500;letter-spacing:.005em;margin:-.35rem 0 .35rem;line-height:1.1}
.wip{
  font-size:.62em;font-weight:400;letter-spacing:.05em;
  color:#a8a29a;vertical-align:.35em;white-space:nowrap;
}
.role{color:var(--muted);font-size:1.05rem;margin:0 0 1.1rem;font-style:italic}
.lede{margin:0 0 1rem;max-width:var(--measure)}
.intro .lede:last-of-type{margin-bottom:1.1rem}

/* contact line at the foot of the intro column */
.contactline{
  font-size:.95rem;color:var(--muted);
  margin:auto 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  max-width:var(--measure);
}
.contactline .sep{color:var(--rule);margin:0 .55rem}
.contactline a{color:var(--blue)}
.contactline .cv-link{font-weight:600}
.contactline .cv-pending{font-weight:600;color:#b9b3a8}

/* ---------- sections ---------- */
section{margin-top:3.6rem}
h2{
  font-size:1.16rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
  margin:0 0 1.3rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule);
}

/* ---------- papers ---------- */
.item{margin-bottom:2rem;max-width:var(--measure)}
.item:last-child{margin-bottom:0}
.title{font-size:1.16rem;font-weight:600;margin:0 0 .1rem;line-height:1.35}
.title a{color:var(--blue);border-bottom:1px solid transparent}
.title a:hover{color:var(--blue-dark);border-bottom-color:var(--blue-dark)}
.title a::after{content:"↗";font-size:.6em;vertical-align:.4em;margin-left:.3em;opacity:.45}
.coauthor{font-weight:400;color:var(--muted)}

/* ---------- collapsible abstract ---------- */
details{margin:.3rem 0 0}
summary{
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.15rem 0;user-select:none;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:1rem;line-height:1;color:var(--rule);display:inline-block;transition:color .15s}
summary:hover,summary:hover::before{color:var(--blue)}
details[open] summary{color:var(--blue)}
details[open] summary::before{content:"–";color:var(--blue)}
.body{
  padding:.55rem 0 .2rem 1.05rem;border-left:2px solid var(--rule);
  margin-top:.5rem;animation:fade .25s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.abstract{margin:0 0 .7rem;color:#3a3a3a;font-size:.9rem;line-height:1.58}
.note{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0}
.note strong{font-weight:600;color:#4a4a4a}

/* ---------- teaching ---------- */
.course{margin-bottom:1.9rem;max-width:var(--measure)}
.course-name{font-size:1.1rem;font-weight:600;margin:0 0 .3rem}
ul.terms{list-style:none;padding:0;margin:0}
ul.terms li{
  font-size:1rem;color:var(--muted);
  padding:.16rem 0 .16rem 1rem;position:relative;line-height:1.55;
}
ul.terms li::before{content:"·";position:absolute;left:.15rem;color:var(--rule);font-size:1.2rem;line-height:1.1}
ul.terms .eval{color:#9a948a}

/* award line above the footer */
.award{font-size:1rem;color:var(--muted);margin:2.4rem 0 0}
.award + footer{margin-top:1.5rem}

footer{
  margin-top:5rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-size:.85rem;color:#a8a29a;letter-spacing:.02em;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
footer a{color:#a8a29a}
footer a:hover{color:var(--blue)}

@media (max-width:620px){
  body{font-size:18px}
  .wrap{padding:0 1.35rem 4rem}
  .topbar{margin-bottom:2.2rem}
  .topbar nav{gap:1.1rem}
  h1{font-size:2rem}
  header.masthead{gap:1.5rem}
  .photo{flex:0 0 150px;width:150px;order:0;align-self:flex-start}
  .photo:not(:has(img)){min-height:190px}
  .contactline{margin-top:.4rem}
}
@media print{
  body{background:#fff;font-size:11pt}
  .wrap{padding:0;max-width:none}
  .photo,.topbar{display:none}
  a{color:#000}
  .title a::after{content:""}
  .body{display:block !important}
}