/* ==========================================================================
   Publications — /publications/            (2026-08-13)
   ==========================================================================

   Replaces an Elementor page whose PowerPack blog widget queried category 81
   and was hard-set to `premium_blog_number_of_posts: 8`. Zhijing's list is 73
   papers, so the old page could not have shown them however many posts existed
   — that cap, not the content, was the actual blocker.

   Variant C: this sheet + publications.js + publications-data.json. Updating
   next time is replacing the JSON; nothing here or in the page changes.

   SHAPE. A list, not cards. 73 academic papers with 1,000-character abstracts
   are a reference table someone scans for a name or a journal — the card grid
   used by Insights and In the Media is for browsing images, and there are no
   images here. Grouped by year, because that is how a publication list is read.

   Tokens are the black/gold set from insights.css / frontpage.css. Keep in
   step. Scope `.pub` + !important throughout — Phlox ships 69+ stylesheets.
   ========================================================================== */

.pub,
.pub-band {
  --pub-gold:     #B89642;
  --pub-ink:      #14171F;
  --pub-ink-soft: #4A4E58;
  --pub-mute:     #8A8F99;
  --pub-bg:       #EFEFEF;
  --pub-card:     #FFFFFF;
  --pub-line:     #D8D8D8;
  --pub-ease:     cubic-bezier(.22,.9,.3,1);
}

.pub {
  display: block !important;
  position: relative !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--pub-ink) !important;
  padding: 34px 0 90px !important;   /* 90 below: the footer sits right after */
}

/* the grey ground runs the width of the window, not of the measure */
.pub::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  top: 0 !important;
  bottom: 0 !important;
  background: var(--pub-bg) !important;
  z-index: 0 !important;
}
.pub > * { position: relative !important; z-index: 1 !important; }

/* ---------- tools: count, search, year chips ---------- */

.pub__tools {
  display: flex !important;
  flex-wrap: wrap !important;
  /* 🚨 flex-start, not center. .pub__years measures 53px against its own 40px
     chips — 13px of phantom height I could not trace to padding, a pseudo, or
     an extra child (align-content/align-self on the chips move nothing). With
     the row centred, the search box centred in 53 and landed 7px below chips
     that sit at the top of theirs. Aligning to the TOP makes both controls
     start at the same y; the count is re-centred on its own. */
  align-items: flex-start !important;
  gap: 14px 18px !important;
  margin: 0 0 26px !important;
}
.pub__count { align-self: center !important; }
/* 🚨 HIDDEN, NOT DELETED — same call as .itm-count and .arc-count on 2026-08-27
   ("所有的页面上面都不要有这个"). This one is a different shape from those two:
   it sits ON the filter row beside the search box and never had a rule under
   it, so it is here for consistency rather than because it looked the same.
   publications.js still writes to it on every filter change; one declaration
   brings it back. */
.pub__count { display: none !important; }
.pub__count {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--pub-mute) !important;
  margin: 0 !important;
}
/* 🚨 The search box and the year chips sit on ONE row and must be the same
   height (Chase, 2026-08-18). They were 45px and 31px — a 14px step, visible
   because they are side by side. Both are now 40px, set explicitly with
   border-box so padding and the 1px border are inside the number: the input was
   content-box, which is why 11+11 padding + 21px line + 2px border came out at
   45 rather than the 33 the padding suggests. Change one, change both. */
/* Wearing .itm-search's clothes — transparent ground, #B7B7B7 hairline, square
   corners, 13px Poppins in caps, and the magnifier. Chase, 2026-08-25: "所有的
   搜索都向columns对齐".

   ⚠️ HEIGHT STAYS 40, not the 34 the rail boxes use. This one is not in a rail;
   it sits in a row beside the year chips, and 40 is what makes those two line
   up — see the note above, and the 8/21 fix that established it. Drop this to
   34 and the chips are 6px taller than the box again. */
.pub__search-wrap {
  position: relative !important;
  flex: 1 1 260px !important;
  max-width: 380px !important;
  display: flex !important;
}
.pub__search {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;                 /* == .pub__chip, see the note above */
  border: 1px solid #B7B7B7 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 30px 0 10px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--pub-ink) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.pub__search::placeholder { color: #9A9A9A !important; }
.pub__search:focus {
  border-color: var(--pub-gold) !important;
}
.pub__search-icon {
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 13px !important;
  height: 13px !important;
  pointer-events: none !important;
  opacity: .6 !important;
}
/* align-items/-content: the chips were sitting at the TOP of a container that
   measured 53px against their own 40px, so equal heights alone still left them
   7px above the search box. Centre them and the row lines up. */
.pub__years {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.pub__chip {
  appearance: none !important;
  box-sizing: border-box !important;
  height: 40px !important;                 /* == .pub__search, see the note above */
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--pub-line) !important;
  background: var(--pub-card) !important;
  color: var(--pub-ink-soft) !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s var(--pub-ease), color .2s var(--pub-ease) !important;
}
.pub__chip:hover { border-color: var(--pub-gold) !important; color: var(--pub-ink) !important; }
.pub__chip.is-on {
  background: var(--pub-ink) !important;
  border-color: var(--pub-ink) !important;
  color: #fff !important;
}
.pub__chip:focus-visible { outline: 2px solid var(--pub-gold) !important; outline-offset: 2px !important; }

/* ---------- year group ---------- */

.pub__year { margin: 0 0 34px !important; }
.pub__year-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 2px solid var(--pub-ink) !important;
}
.pub__year-num {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--pub-ink) !important;
  margin: 0 !important;
}
.pub__year-n {
  font-size: 13px !important;
  color: var(--pub-mute) !important;
}

/* ---------- one paper ---------- */

.pub-item {
  background: var(--pub-card) !important;
  border: 1px solid var(--pub-line) !important;
  border-radius: 0 !important;
  padding: 20px 22px !important;
  margin: 0 0 10px !important;
}
.pub-item__journal {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--pub-gold) !important;
  margin: 0 0 7px !important;
}
.pub-item__title { margin: 0 0 8px !important; }
.pub .pub-item__title a {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--pub-ink) !important;
  text-decoration: none !important;
}
.pub .pub-item__title a:hover { color: var(--pub-gold) !important; text-decoration: underline !important;
  text-underline-offset: 3px !important; }
.pub-item__authors {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--pub-ink-soft) !important;
  margin: 0 0 6px !important;
}
/* 🚨 No emphasis on any author name. Faculty were briefly bold and PhD students
   italic; Yilan, 2026-08-14: bolding the HKU authors reads as "corresponding
   author", which is a claim about the paper we are not entitled to make. Chase
   dropped the italic with it, so every name is now set identically and the key
   under the filters is gone. The roles are still in the DATA (authors_list[].r)
   — do not add styling back without asking. */

.pub-item__meta {
  font-size: 12.5px !important;
  color: var(--pub-mute) !important;
  margin: 0 !important;
}
.pub .pub-item__meta a { color: var(--pub-mute) !important; text-decoration: underline !important; }
.pub .pub-item__meta a:hover { color: var(--pub-gold) !important; }

/* abstract: collapsed by default — these run 587 to 1,892 characters and 73 of
   them expanded is an unreadable wall */
.pub-item__abs {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--pub-ink-soft) !important;
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--pub-line) !important;
}
.pub-item__abs[hidden] { display: none !important; }
.pub__toggle {
  appearance: none !important;
  background: none !important;
  border: 0 !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pub-ink) !important;
  cursor: pointer !important;
}
.pub__toggle:hover { color: var(--pub-gold) !important; }
.pub__toggle:focus-visible { outline: 2px solid var(--pub-gold) !important; outline-offset: 2px !important; }

.pub__empty {
  background: var(--pub-card) !important;
  border: 1px dashed var(--pub-line) !important;
  padding: 34px 22px !important;
  text-align: center !important;
  color: var(--pub-ink-soft) !important;
  font-size: 15px !important;
}

/* ---------- title band (matches the other black-language pages) ---------- */

.pub-band {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: #000 !important;
  color: #fff !important;
}
.pub-band__inner {
  max-width: var(--esgri-measure, 72vw) !important;
  margin: 0 auto !important;
  padding: 64px 0 60px !important;
}
.pub-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .pub-band__inner { padding: 48px 16px 44px !important; }
  .pub .pub-item__title a { font-size: 17px !important; }
}
@media (max-width: 767px) {
  .pub-band__inner { padding: 36px 16px 32px !important; }
  .pub { padding: 26px 0 64px !important; }
  .pub-item { padding: 16px 16px !important; }
  .pub__search { max-width: none !important; }
  .pub__year-num { font-size: 22px !important; }
}