/* my style — 与 rixinli.com (v2) 共用的一套样式；name 行里的中文是 吴思诗 */

/* font for title bar, mainly name and navi-bar */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../font/HaochiDanSemiBold.eot'); /* IE9 */
  src: url('../../font/HaochiDanSemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../font/HaochiDanSemiBold.woff2') format('woff2'), /* Modern Browsers */
    url('../../font/HaochiDanSemiBold.woff') format('woff'), /* Modern Browsers */
    url('../../font/HaochiDanSemiBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../../font/Cinzel-500.svg#Cinzel') format('svg'); /* Legacy iOS */
}
h1, h2, nav>ul>li>a {
  font-family: "HaochiDanSemiBold", "Cinzel", "Times New Roman", Times, serif;
}

/* font for Simplified Chinese, from a subset of font file */
@font-face {
  font-family: for_SC;
  src: url('../../font/SourceHanSerifSC-VF-subset.woff2') format("woff2"),
       url('../../font/SourceHanSerifSC-VF-subset.zopfli.woff') format("woff"),
       url('../../font/SourceHanSerifSC-VF-subset.ttf') format("truetype");
  unicode-range: U+5434,U+5DDE,U+601D,U+65B0,U+65E5,U+674E,U+798F,U+8BD7;
  /* This is a variable font (wght axis 250-900), so declare the range rather than a
     single value. With "400" the browser rendered the name in <h1> (weight 700) as
     wght=400 plus synthetic bold instead of the font's real Bold. */
  font-weight: 250 900;
}

/* 汇文正楷 (TerryWang, 免费商用)，同样只切出站内用到的 8 个字，8 个都有。
   OS/2 字重 500，声明成 500-900 避免合成粗体。
   原字里 新 偏扁 (墨迹高 788 vs 李 886)，子集里已把 新 的轮廓以自身中心 (y=340)
   为轴纵向拉长 8% (高 852)；中心不动，所以下面的中轴线对齐不受影响。 */
@font-face {
  font-family: for_SC_huiwen;
  src: url('../../font/HuiWenZhengKai-subset.woff2') format("woff2"),
       url('../../font/HuiWenZhengKai-subset.woff') format("woff"),
       url('../../font/HuiWenZhengKai-subset.ttf') format("truetype");
  unicode-range: U+5434,U+5DDE,U+601D,U+65B0,U+65E5,U+674E,U+798F,U+8BD7;
  font-weight: 500 900;
}

/* 第二个 for_SC 是兜底: 缺字时回落到思源宋体，而不是掉到系统默认字体。 */
.SCtext {
  font-family: for_SC_huiwen, for_SC;
}

/* 标题里的中文和 "Rixin Li" 中轴线对齐。
   汉字填满 em 方框，拉丁大写字母只占约 70%，所以同样字号下汉字的墨迹更高
   (实测 56px 标题: 中文 52px vs 拉丁 43px)，且底部低出一截。这里不缩字号，
   只把中文上移，让两者的光学中心重合 —— 中文仍比拉丁大一圈，
   但上下对称地多出，看起来是居中的而不是下坠的。
   上移量随字体而变 (canvas measureText 墨迹中心实测): 王漢宗粗楷 0.0625em，
   汇文正楷 0.03em (它的字身小一些，56px 下墨迹高 50px vs 王漢宗 54px)。 */
#name .SCtext {
    vertical-align: 0.03em;
}

/* for names */
#name .name_line1, #name .name_line2 {
    display: inline; /* Default display: inline for larger screens */
}

/* 英文名和中文名之间的竖线。用 CSS 画而不是直接写字符 "|":
   字符的高度由字体决定，在这个字号下会和字母一样高、一样重，太抢眼。
   画出来才能单独控制高度、粗细和颜色。 */
#name .name_line2::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0.72em;
    border-left: 2px solid #bbb;
    margin: 0 0.7em;
    vertical-align: -0.03em;
}

@media (max-width: 768px) { /* Adjust max-width to your breakpoint */
    #name .name_line1, #name .name_line2 {
        display: block; /* Set to block for smaller screens */
    }
    #name .name_line2 {
        margin-top: 5px; /* Optional: add spacing between lines */
    }
    /* 窄屏下两行上下堆叠，中间的竖线就没有意义了 */
    #name .name_line2::before {
        display: none;
    }
}

/* body text: one size and one line spacing across the site */
.opening_text {
    font-size: 21px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .opening_text {
        font-size: 18px;
    }
}

/* for the quick links to show at different places */
.quick_links_loc1 {
    display: none; /* Hide by default */
}

/* Under the photo: only while photo and bio are side by side (template "small" is <=736px) */
@media (min-width: 737px) {
    .quick_links_loc1 {
        display: block;
    }
}

.quick_links_loc2 {
    display: none; /* Hide by default */
}

/* After the bio: only once the columns stack */
@media (max-width: 736px) {
    .quick_links_loc2 {
        display: block;
    }
}

/* a link only when its target is out of sight, i.e. once the layout stacks on small screens */
@media (min-width: 737px) {
    a.link_small_only {
        color: inherit;
        border-bottom: none;
        pointer-events: none;
        cursor: text;
    }
}

/* add spacing to lists in tools & links */
.opening_text.tools_links li {
    padding-bottom: 8px;
}
/* publication list on research.html: bold title, a links line, then the summary */
.pub {
    padding-top: 0.8em;
    clear: both;
}
.pub .pub-title {
    font-weight: 600;
    color: #444;
    text-align: left;
    margin: 0 0 0.2em 0;
}
.pub .pub-links {
    text-align: left;
    margin: 0 0 0.3em 0;
}
.pub .pub-cite {
    text-align: left;
    margin: 0 0 0.2em 0;
}

/* Featured paper card at the top of research.html (same look as the topic cards on rixinli.com) */
.feature-card {
    border: 2px solid #d9d9d9;   /* 2px + slightly darker gray: visible against the white page */
    border-radius: 6px;
    background: #fff;
    padding: 1.6em 2em 1.4em;
    margin: 0.5em 0 2.2em 0;
    display: flow-root;   /* contain the floated badge */
}
.feature-card .feature-label {
    font-size: 0.8em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 0.4em 0;
}
.feature-card .feature-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    text-align: left;
    margin: 0 0 0.4em 0;
}
.feature-card .altmetric-embed {
    float: right;
    margin: 0 0 0.6em 1.2em;
}
@media screen and (max-width: 736px) {
    .feature-card { padding: 1.2em 1.2em 1em; }
}
/* the Altmetric script wraps the donut in a link; drop the theme's link underline there */
.altmetric-embed a,
.altmetric-embed a:hover {
    border-bottom: none;
}

/* Homepage profile slideshow: the three photos share one frame and cross-fade.
   The first photo stays in normal flow to give the frame its height (all three are 1616x909);
   the others sit on top of it. */
.slides {
    position: relative;
    display: block;
}
.slides img {
    display: block;
    width: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.slides img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}
.slides img.on {
    opacity: 1;
}