/* ==========================================================================
   The Sai Lab — Publications page
   Modern, dependency-free stylesheet (no CSS framework, no JavaScript)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --navy:       #002147;
  --navy-700:   #0b3a6b;
  --accent:     #e95d3c;

  --ink:        #1c2430;
  --ink-soft:   #4c5666;
  --ink-muted:  #7b8798;

  --line:       #e5e9f0;
  --paper:      #ffffff;
  --paper-alt:  #f5f8fc;
  --page:       #141414;

  --container:  1120px;
  --radius:     12px;
  --shadow:     0 18px 40px -28px rgba(9, 26, 51, .45);

  --font-sans:  "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
/* *, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.7 var(--font-sans);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--navy-700); }
sup { font-size: .68em; line-height: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: .875rem;
} */

/* --------------------------------------------------------------------------
   2. Base / reset —— 全部限定在正文 #main.page 内，绝不允许外溢到 #header
   -------------------------------------------------------------------------- */
#main.page *, #main.page *::before, #main.page *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* 这两条只影响根元素，不改变 header 布局 */
  scroll-behavior: smooth;
}

/* 原来这里是 body { ... }，会通过继承把 em 基准灌进 #header */
#main.page {
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.7 var(--font-sans);
}

#main.page h1,
#main.page h2,
#main.page h3 { margin: 0; line-height: 1.25; }
/* style.css 里的全局 p { text-indent: 2em } 会让每条 citation 首行缩进，本页取消 */
#main.page p { margin: 0; text-indent: 0; }
#main.page ul { margin: 0; padding: 0; }
#main.page img,
#main.page video { display: block; max-width: 100%; height: auto; }
#main.page a { color: var(--navy-700); }
#main.page sup { font-size: .68em; line-height: 0; }

/* 原来这里是 :focus-visible 与 .container，同样收进正文范围 */
#main.page :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 与 skel 栅格的 .container 同名，加了 #main.page 前缀就不会再干扰 header */
#main.page .container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Site header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 2vw, 1.75rem);
  background: radial-gradient(120% 140% at 50% 0%, #0a2f5c 0%, var(--navy) 55%, #001730 100%);
  color: #fff;
  text-align: center;
}

.site-brand {
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  font-size: clamp(1.9rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.site-brand a { color: inherit; text-decoration: none; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: .55rem 1.05rem;
  border: 2px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.site-nav a[aria-current="page"] {
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
.page {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}

.page-head {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.page-head__title {
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -.015em;
  color: var(--navy);
}

.page-head__lead {
  max-width: 68ch;
  margin-top: .75rem;
  color: var(--ink-soft);
}

.legend {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--ink-muted);
}

.legend sup { font-weight: 700; color: var(--navy-700); }

/* --------------------------------------------------------------------------
   5. Publication groups
   -------------------------------------------------------------------------- */
.group { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--navy);
}

.group__title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: var(--navy);
}

.group__count {
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--navy-700);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.group--featured .group__head { border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Publication entries
   -------------------------------------------------------------------------- */
.pub-list { list-style: none; }

/* 编号、句点与 citation 同属一段文字流（标点写在 HTML 中） */
.pub { padding: .6rem 0; }

.pub__num {
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.pub__text { min-width: 0; }

/* 一条 citation 的作者、标题与期刊信息排在同一段内，不另起行 */
.pub__cite {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.pub__cite .pub__authors { color: var(--ink-soft); }

.pub__cite .me {
  font-weight: 800;
  color: var(--navy);
}

.pub__cite sup { color: var(--accent); font-weight: 700; }

.pub__cite .pub__title {
  font-weight: 650;
  color: var(--ink);
}

.pub__cite .pub__source { color: var(--ink-muted); }

.pub__journal { font-style: italic; font-weight: 600; color: var(--ink-soft); }

.pub__doi {
  font-size: .82rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 93, 60, .35);
}

.pub__doi:hover { border-bottom-color: currentColor; }

.pub__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .65rem;
  list-style: none;
}

.pub__badges li {
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--navy-700);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.pub__badges a { color: inherit; }

/* --------------------------------------------------------------------------
   7. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: #0f1012;
  color: rgba(255, 255, 255, .72);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 3rem;
}

.site-footer h2 {
  margin-bottom: .9rem;
  color: rgba(255, 255, 255, .45);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer ul { display: grid; gap: .5rem; list-style: none; }

.site-footer a {
  color: rgba(255, 255, 255, .82);
  font-size: .875rem;
  text-decoration: none;
}

.site-footer a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
/* 窄屏也只压缩字号，编号始终与 citation 文字同一行 */
@media (max-width: 600px) {
  #main.page { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   9. Print
   -------------------------------------------------------------------------- */
@media print {
  #main.page { font-size: 11pt; }
  .skip-link, .site-header, .site-footer { display: none; }
  .page { padding: 0; }
  .pub { padding: .35rem 0; break-inside: avoid; }
  .pub__doi { color: inherit; border: 0; }
}