/*
 * Economic Theory at CUHK: the styles of the public pages, also loaded by the site editor (which adds
 * site/admin/admin.css). Styled after the CUHK Business School website style guide (2026, MCO):
 * Myriad Pro, primary #5C33AD / #392064, utility greys, white header with hanging school logo,
 * lavender top banner, event list and event content patterns.
 *
 * Screen widths: phones up to 639px, tablets 640-1023px, desktops from 1024px. A few rules use finer
 * steps: below 560px (header), below 768px (seminar lists), from 768px and 1440px (banner), from 1360px
 * (footer). The logos scale with the screen width, up to 72px high (.cobrand).
 *
 * Sections, in order: fonts; tokens; base; prototype banner and data notice; header; top banner;
 * breadcrumb; buttons; event list; event meta panel; home; past seminar rows; filters; seminar detail;
 * about; footer, with the reduced-motion and print rules; people; other activities; home at a glance;
 * Upcoming / Past tabs; topics and search; shared rules.
 */

/* ---------- Fonts (Myriad Pro, as served by bschool.cuhk.edu.hk) ---------- */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-semibold-italic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (from the style guide) ---------- */
:root {
  --purple: #5c33ad; /* Primary */
  --purple-dark: #392064; /* Primary (dark) */
  --orange: #fdb015; /* Accent used on event meta panels */
  --ink: #3d3d3d; /* Content Grey 2 */
  --grey-959: #686868; /* Utility */
  --grey-595: #595959; /* Utility */
  --grey-808: #626262;
  --menu: #222222;
  --panel: #f2f3f4; /* Utility light grey */
  --section-grey: #f2f2f2;
  --btn-grey: #e3e3e3;
  --line: #d9d9d9;
  --white: #ffffff;

  --font: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad-x: 24px;
  --container: 1320px;
}

@media (min-width: 1024px) {
  :root {
    --pad-x: 62px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Where scroll bars take up room (Windows, or a Mac with a mouse), keep that room on every page, so the
     layout does not move sideways when a page becomes long enough to scroll as its content arrives. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: inherit;
  font-size: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button {
  font: inherit;
}
b,
strong {
  font-weight: 600;
}
[hidden] {
  display: none !important;
}

a {
  color: var(--purple);
  text-decoration: none;
}
a:hover {
  color: var(--purple-dark);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--purple);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
  color: var(--white);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section {
  padding: 40px 0;
}
.section-grey {
  background: var(--section-grey);
}
@media (min-width: 1024px) {
  .section {
    padding: 60px 0;
  }
}
/* A section that follows a page introduction (People, About) starts closer to it. */
.section.section--after-intro {
  padding-top: 24px;
}

/* Typography per guide: H1 uppercase purple, H2 purple, H3 16/700, H4 16/600 */
.h1,
.page-title {
  font-size: 28px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--purple);
}
.h2,
.section-title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--purple);
}
.section-title {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
}
.subtitle {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--purple);
}
/* The home page's "Also coming up" heading, just above its list of seminars. */
.subtitle.subtitle--before-list {
  margin-bottom: 14px;
}

.prose p + p {
  margin-top: 22px;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Editable wording (site/data/pages.js): one or more paragraphs in a .rich block */
.prose .rich + p {
  margin-top: 22px;
}
.page-intro .rich p + p {
  margin-top: 10px;
}
.page-intro .rich a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-line + .contact-line,
[data-contact-only] + .contact-line {
  margin-top: 6px;
}
/* Contact fades in and out without restarting from transparent on repeated clicks. */
.contact-block {
  scroll-margin-top: 32px;
  border-radius: 3px;
  background-color: rgba(92, 51, 173, 0);
  box-shadow: 0 0 0 12px rgba(92, 51, 173, 0);
  transition:
    background-color 0.8s ease-out,
    box-shadow 0.8s ease-out;
}
.contact-block.is-highlighted {
  background-color: rgba(92, 51, 173, 0.075);
  box-shadow: 0 0 0 12px rgba(92, 51, 173, 0.075);
  transition-duration: 0.2s;
}
/* Keep the target focusable without a browser-dependent ring after a tap/click. */
.contact-block h2[data-contact-focus="pointer"]:focus {
  outline: none;
}
.contact-block h2[data-contact-focus="keyboard"]:focus {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ---------- Prototype banner and data notice ---------- */
.draft-banner {
  background: #fff4dc;
  border-bottom: 1px solid #f6d58e;
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.draft-banner .container {
  padding-top: 8px;
  padding-bottom: 8px;
}
.draft-banner strong {
  font-weight: 700;
}
/* "Some information could not be loaded…" at the top of the page. */
.data-notice {
  padding: 16px 24px;
  background: #fff2cf;
  color: #4d3900;
  border-bottom: 2px solid #785600;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 18px 0 18px var(--pad-x);
}
/* Co-branding lock-up (CUHK Business School Brand Book 2.1.6; MCO, 29 Sep 2026): the Business School's
   extended logo on the left and the Economics logo on the right, the same height (--logo-h). Clear space of
   at least 0.2 × the width of the Business School logo (its mark is 0.94 × its height) is kept around each
   logo, with the optional dividing line in the middle.
   Logo (MCO, 9 Oct 2026): version B of the extended logo, with larger text, 4.38 × its height wide. With the
   Economics logo (4.95 ×), the clear space and the divider, the lock-up is 9.73 × --logo-h wide.
   Size (MCO, 9 Oct 2026, "version C"): at most 72px high, the size before MCO's review, so that every screen
   keeps one header row. MCO confirmed it as the correct application instead of the Brand Book's minimum
   digital size (a mark 90px wide, 96px high, where the lock-up is 935px wide and pushes the menu to a
   second row): the header template limits the logo's height, and the larger text keeps it readable. */
.cobrand {
  --logo-h: 44px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--logo-h) * 0.2);
}
.cobrand a {
  display: block;
  flex: none;
}
.cobrand img {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: none;
}
.cobrand .logo-divider {
  width: 1px;
  height: calc(var(--logo-h) * 0.8);
  background: var(--line);
  flex: none;
}
/* Tablets: the logos take the rest of the row beside the menu and search buttons, up to 72px high. The
   padding, the two buttons and a 16px gap take 136px, and 16px more is left for a scroll bar. */
.header-logos {
  min-width: 0;
  flex: 0 1 auto;
  --logo-h: min(72px, calc((100vw - 152px) / 9.73));
}

.main-nav {
  margin-left: auto;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a {
  display: inline-block;
  color: var(--menu);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover {
  color: var(--purple);
  text-decoration: none;
}
.main-nav a[aria-current="page"] {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.header-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
}
.header-icon img {
  width: 22px;
  height: 22px;
}
.header-search {
  margin-left: 8px;
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--grey-595);
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 0;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Computers: one row, the logos on the left and the menu on the right, as on the Business School's
   website. The logos are 72px high from about 1,260px wide and shrink on narrower screens, where the menu,
   the search button and the padding take about 560px. */
@media (min-width: 1024px) {
  .header-inner {
    gap: 24px;
    padding-right: var(--pad-x);
  }
  .header-logos {
    --logo-h: clamp(46px, calc((100vw - 560px) / 9.73), 72px);
  }
}

/* Below 1024px the nav collapses to the menu button. */
@media (max-width: 1023px) {
  .header-inner {
    gap: 0; /* the two buttons side by side: their 44px boxes already space the icons */
    padding-right: 8px;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #e2e3e4;
  }
  .main-nav.is-open {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--pad-x) 12px;
  }
  .main-nav li {
    border-bottom: 1px solid #e2e3e4;
  }
  .main-nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 0;
  }
  .main-nav a[aria-current="page"] {
    font-weight: 600;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-left: auto; /* the menu button and the search icon on the right */
  }
  .header-search {
    margin-left: 0;
  }
}

/* Phones: still one row, the logos beside the two buttons and as large as the width allows (about 25px
   high on a 375px screen). Scroll bars take no room on phones, so only the 16px gap is kept free. */
@media (max-width: 559px) {
  .header-inner {
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header-logos {
    --logo-h: calc((100vw - 136px) / 9.73);
  }
}

/* ---------- Top banner ---------- */
/* The photo comes in three sizes. Below 1024px the title covers more of it, so a darker tint keeps the
   white title readable. */
.top-banner {
  background-color: #9ca3c1;
  background-image: linear-gradient(rgba(57, 32, 100, 0.52), rgba(57, 32, 100, 0.52)), url("../img/banner-mobile.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.top-banner .container {
  min-height: 128px;
  display: flex;
  align-items: center;
}
.top-banner-title {
  color: var(--white);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 20px 0;
}
@media (min-width: 640px) {
  .top-banner {
    background-image:
      linear-gradient(rgba(57, 32, 100, 0.52), rgba(57, 32, 100, 0.52)), url("../img/banner-tablet.jpg");
  }
}
@media (min-width: 1024px) {
  .top-banner {
    background-image: linear-gradient(rgba(57, 32, 100, 0.2), rgba(57, 32, 100, 0.2)), url("../img/banner.jpg");
  }
  .top-banner .container {
    min-height: 180px;
  }
  .top-banner-title {
    font-size: 34px;
  }
}
@media (min-width: 1440px) {
  .top-banner .container {
    min-height: 236px;
  }
  .top-banner-title {
    font-size: 44px;
  }
}

/* ---------- Breadcrumb ---------- */
.breadcrumbs {
  padding-top: 24px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--grey-959);
}
.breadcrumbs a {
  color: var(--grey-959);
}
.breadcrumbs a:hover {
  color: var(--purple);
}
.breadcrumbs .sep {
  margin: 0 10px;
}

.page-intro {
  padding-top: 24px;
  padding-bottom: 8px;
}
.page-intro .page-title {
  margin-bottom: 12px;
}
.page-intro p {
  max-width: 60em;
}

/* ---------- Buttons ---------- */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 6px 20px;
  background: var(--btn-grey);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.link-btn svg {
  width: 16px;
  height: 16px;
  color: var(--purple-dark);
  flex: none;
  transition: color 0.2s ease;
}
.link-btn:hover {
  background: var(--purple);
  color: var(--white);
  text-decoration: none;
}
.link-btn:hover svg {
  color: var(--white);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 22px;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-primary svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.btn-primary:hover {
  background: var(--purple-dark);
  color: var(--white);
  text-decoration: none;
}

/* Border-box tags (event list) — used as small links on seminar cards */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: 1px solid var(--grey-959);
  color: var(--ink);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--white);
  cursor: pointer;
  font-family: var(--font);
}
a.tag:hover,
button.tag:hover {
  border-color: var(--purple);
  color: var(--purple);
  text-decoration: none;
}
.tag svg {
  width: 14px;
  height: 14px;
}

/* ---------- Event list (seminar cards) ---------- */
.event-list {
  display: grid;
  gap: 20px;
}

.event {
  display: flex;
  background: var(--white);
}
.event__date {
  flex: 0 0 200px;
  background: var(--purple);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 12px;
  gap: 4px;
}
.event__date .d {
  font-size: 64px;
  line-height: 1;
  font-weight: 300;
}
.event__date .m {
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}
.event__date .w {
  font-size: 15px;
  font-weight: 300;
  opacity: 0.9;
}
.event__date .today {
  margin-top: 8px;
  padding: 2px 10px;
  background: var(--orange);
  color: var(--menu);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event__content {
  flex: 1;
  min-width: 0;
  padding: 22px 28px 24px 30px;
}
.event__subtitle {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--purple);
  margin-bottom: 4px;
}
.event__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.event__title a {
  color: inherit;
}
.event__title a:hover {
  color: var(--purple);
}
.event__title.tba {
  color: var(--grey-595);
  font-weight: 600;
}

.event__table {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}
.event__item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
}
.event__item dt {
  font-weight: 600;
}
.event__item dd {
  font-weight: 300;
}

.event__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  .event {
    flex-direction: column;
  }
  .event__date {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    padding: 14px 16px;
    gap: 10px;
  }
  .event__date .d {
    font-size: 36px;
  }
  .event__date .today {
    margin: 0 0 0 auto;
    align-self: center;
  }
  .event__content {
    padding: 18px 16px 20px 20px;
  }
  .event__title {
    font-size: 18px;
  }
  .event__item {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

/* ---------- Event meta panel (guide: event content sidebar) ---------- */
.meta-panel {
  background: var(--panel);
  border-left: 7px solid var(--orange);
  padding: 22px 32px 26px 19px;
}
.meta-panel .subtitle {
  margin-bottom: 6px;
}
.meta-panel .meta-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 18px;
}
.meta-panel .meta-title a {
  color: var(--ink);
}
.meta-panel .meta-title a:hover {
  color: var(--purple);
}
.meta-panel dl {
  display: grid;
  gap: 14px;
}
.meta-panel dt {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 4px;
}
.meta-panel dd {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}
.meta-panel dd .aff {
  display: block;
  font-weight: 300;
  margin-top: 2px;
}
.meta-panel dd a {
  font-weight: 400;
}
.meta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ---------- Home ---------- */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 60px;
  align-items: start;
}
.home-intro .section-title {
  margin-bottom: 18px;
}
.home-intro .prose {
  margin-bottom: 26px;
  max-width: 42em;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
}
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--purple);
}
.more-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .home-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Past seminar rows ---------- */
.past-list {
  border-top: 1px solid var(--line);
}
.past-row {
  border-bottom: 1px solid var(--line);
}
.past-row a {
  display: grid;
  grid-template-columns: 140px minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 24px;
  padding: 16px 12px;
  color: var(--ink);
}
.past-row a:hover {
  background: var(--white);
  text-decoration: none;
}
.section:not(.section-grey) .past-row a:hover {
  background: var(--section-grey);
}
.past-row .p-date {
  color: var(--grey-595);
  font-weight: 400;
  white-space: nowrap;
}
.past-row .p-speaker {
  font-weight: 600;
}
.past-row .p-aff {
  display: block;
  font-weight: 300;
}
.past-row .p-title {
  color: var(--purple);
  font-weight: 400;
}
.past-row a:hover .p-title {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .past-row a {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 4px;
  }
}

.year-group + .year-group {
  margin-top: 44px;
}
.year-group .h2 {
  margin-bottom: 14px;
}
.year-group .count {
  font-size: 16px;
  color: var(--grey-595);
  margin-left: 10px;
}

.month-group + .month-group {
  margin-top: 44px;
}
.month-group .h2 {
  margin-bottom: 18px;
}

/* ---------- Filters (guide: input fields) ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.input-field {
  position: relative;
  flex: 1 1 320px;
  max-width: 520px;
}
.input-field input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  padding: 4px 34px 4px 0;
  border: 0;
  border-bottom: 1px solid #a6a6a6;
  background: transparent;
  border-radius: 0;
  height: 36px;
}
.input-field input::placeholder {
  color: var(--grey-959);
}
.input-field input:focus {
  outline: none;
  border-bottom-color: var(--purple);
}
.input-field img {
  position: absolute;
  right: 4px;
  bottom: 9px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.filter select {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  height: 36px;
  padding: 6px 34px 6px 15px;
  border: 1px solid #acacac;
  border-radius: 0;
  background: var(--white) url("../img/select-arrow.svg") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
}
.filter select:focus {
  outline: 2px solid var(--purple);
  outline-offset: 0;
}
/* Topic picker (Seminars pages): a box like the select above that opens a list with tick boxes, so that
   several topics can be chosen. A native select would allow one only, and would open as the operating
   system's own menu. */
.topic-picker {
  position: relative;
  flex: none;
  max-width: 100%;
}
/* A fixed width, wide enough for the longest row of the open list (a topic name with a two-digit count),
   so that the list lines up with the box, and choosing a topic never changes the row's layout while the
   list is open. A longer name ends in an ellipsis here and widens the list. */
.topic-picker__button {
  display: block;
  width: 336px;
  max-width: 100%;
  height: 36px;
  padding: 6px 40px 6px 15px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #acacac;
  border-radius: 0;
  background: var(--white) url("../img/select-arrow.svg") no-repeat right 12px center;
  cursor: pointer;
}
.topic-picker__button[aria-expanded="true"] {
  border-color: var(--purple);
}
.topic-picker__button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 0;
}
.topic-picker__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 2 * var(--pad-x));
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--white);
  border: 1px solid #acacac;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
/* Opens towards the left when it would run past the right edge of the page (site.js), e.g. when the
   picker sits beside the search box on a tablet. */
.topic-picker__panel.is-end {
  left: auto;
  right: 0;
}
.topic-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.topic-option:hover {
  background: var(--panel);
}
.topic-option input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--purple);
}
/* Colour only: a bolder name would widen the open list. */
.topic-option input:checked + .topic-option__name {
  color: var(--purple);
}
.topic-option .n {
  margin-left: auto;
  padding-left: 24px;
  font-size: 14px;
  color: var(--grey-808);
}
.result-count {
  color: var(--grey-595);
  margin-bottom: 18px;
}
.empty-state {
  padding: 28px;
  text-align: center;
  background: var(--panel);
  color: var(--grey-595);
}

/* ---------- Seminar detail (guide: event content) ---------- */
.post-head {
  padding-top: 28px;
  padding-bottom: 8px;
}
.post-head .subtitle {
  margin-bottom: 8px;
}
.post-title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  max-width: 30em;
  margin-bottom: 10px;
}
.post-title.tba {
  color: var(--grey-595);
}
.post-speaker {
  font-size: 18px;
  line-height: 26px;
}
.post-speaker strong {
  font-weight: 600;
}

.post__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}
.post__text .h2 {
  margin-bottom: 14px;
}
.post__text .prose {
  max-width: 46em;
}
.post__text .missing {
  color: var(--grey-595);
  font-style: italic;
}
.post__text .note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--grey-595);
}
.post__text .paper-link {
  margin-top: 24px;
}
/* A link without an abstract sits right under the heading, as the abstract would. */
.post__text .h2 + .paper-link {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .post-title {
    font-size: 34px;
  }
}
@media (max-width: 1023px) {
  .post__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .post__meta {
    order: -1;
  }
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}
.about-grid .h2 {
  margin: 36px 0 12px;
}
.about-grid .prose > .h2:first-child {
  margin-top: 0;
}
.organisers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 32px;
}
.organisers li {
  display: grid;
  gap: 2px;
  padding-left: 14px;
  border-left: 3px solid var(--purple);
}
.organisers .org-name {
  font-weight: 600;
}
.organisers .org-name a {
  text-decoration: none;
}
.organisers .org-name a:hover {
  text-decoration: underline;
}
.organisers .org-unit {
  font-size: 15px;
  line-height: 22px;
  color: var(--grey-595);
}
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.person {
  background: var(--panel);
  padding: 16px 18px;
}
.person .name {
  font-weight: 600;
}
.tbc {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a5200;
  background: #ffe6b0;
  vertical-align: 1px;
}
@media (max-width: 1023px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Footer (guide: footer) ---------- */
.site-footer {
  border-top: 1px solid #e2e3e4;
  background: var(--white);
}
.footer__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
/* MCO (29 Sep): the same co-branding lock-up as the header (.cobrand), and no standalone CUHK emblem
   (the Economics logo and the extended Business School logo already name the University). MCO (9 Oct):
   at most 72px high, as in the header. The footer is one centred column, with the contact, the links and
   the copyright below the logos; from 1360px they fit beside the logos, on the right. */
.footer__logos {
  justify-content: center;
  --logo-h: min(72px, calc((100vw - 64px) / 9.73));
}
.footer__contact {
  margin-top: 18px;
  font-size: 15px;
  color: var(--grey-595);
  display: grid;
  justify-items: center;
  gap: 2px;
}
.footer__contact a {
  color: var(--grey-595);
  text-decoration: underline;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin-bottom: 10px;
}
.footer__links a {
  color: var(--grey-595);
  font-size: 16px;
  font-weight: 600;
}
.footer__links a:hover {
  color: var(--purple);
}
.copyright {
  font-size: 15px;
  line-height: 20px;
  font-weight: 300;
  color: var(--grey-808);
}
@media (min-width: 1360px) {
  .footer__wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
  .footer__logos {
    justify-content: flex-start;
  }
  .footer__contact {
    justify-items: start;
  }
  .footer__right {
    text-align: right;
  }
  .footer__links {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

@media print {
  .draft-banner,
  .main-nav,
  .menu-toggle,
  .header-search,
  .event__bottom,
  .meta-actions {
    display: none !important;
  }
  .site-header {
    box-shadow: none;
  }
  .top-banner {
    background: none !important;
  }
  .top-banner-title {
    color: var(--purple);
  }
  .event__date {
    background: none;
    color: var(--ink);
    border-right: 1px solid var(--line);
  }
}

/* ---------- People ---------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.person-card {
  background: var(--panel);
  border-left: 7px solid var(--purple);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
}
.person-name {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.person-name a {
  color: inherit;
}
.person-name a:hover {
  color: var(--purple);
}
.person-title {
  font-weight: 400;
}
.person-dept {
  color: var(--grey-595);
}
.person-fields {
  margin-top: 10px;
  font-size: 15px;
  line-height: 21px;
}
.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: auto;
  padding-top: 14px;
}
.person-links .more-link {
  font-size: 15px;
}
.person-links .is-soon {
  font-weight: 400;
  color: var(--grey-595);
} /* "CUHK profile coming soon": not a link */

/* Surname initials above the list: square buttons in the style of the topic buttons */
.az-filter {
  margin-bottom: 20px;
}
.az-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.az-letters button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--grey-959);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.az-letters button:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.az-letters button[aria-pressed="true"] {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}
.people-count:empty {
  margin: 0;
}

/* ---------- Other activities (home) ---------- */
.activities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.activity {
  border: 1px solid var(--line);
  padding: 20px 20px 22px;
  background: var(--white);
}
.activity h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin: 10px 0 6px;
}
.activity p {
  font-size: 15px;
  line-height: 21px;
}
.series-intro {
  max-width: 60em;
  margin-bottom: 28px;
}
.activity .tbc {
  margin-left: 0;
}

/* Mailing-list box at the end of the Seminar Series section (home), shown once a link is set */
.mailing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--white);
  border-left: 3px solid var(--purple);
}
.mailing-cta__text {
  flex: 1 1 320px;
  min-width: 0;
}
.mailing-cta__text .subtitle {
  margin-bottom: 4px;
}
@media (max-width: 1023px) {
  .activities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .activities {
    grid-template-columns: 1fr;
  }
}

/* Footer credit (small, low-key) */
.credit {
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
  color: var(--grey-959);
}

.person-appts {
  margin-top: 6px;
  display: grid;
  gap: 2px;
}
.person-appts li {
  font-size: 15px;
  line-height: 21px;
  color: var(--grey-595);
  padding-left: 12px;
  position: relative;
}
.person-appts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  background: var(--purple);
}
.credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(149, 149, 149, 0.5);
}
.credit a:hover {
  color: var(--purple);
  text-decoration-color: currentColor;
}

/* ---------- Home: at a glance + topics (guide: Statistics) ---------- */
.glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
/* While the data loads, its message spans the whole row. */
.glance[aria-busy="true"] > .empty-state {
  grid-column: 1 / -1;
}
.glance-num {
  display: block;
  font-size: 56px;
  line-height: 1;
  font-weight: 300;
  color: var(--purple);
}
.glance-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
}
.topics-strip {
  margin-top: 36px;
}
.topics-strip .subtitle {
  margin-bottom: 10px;
}
.topics-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.person-card.is-target {
  box-shadow: 0 0 0 2px var(--purple);
}
@media (max-width: 639px) {
  .glance {
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .glance-num {
    font-size: 40px;
  }
  .glance-label {
    font-size: 14px;
    line-height: 19px;
  }
}

/* Glance figures are links */
a.glance-item {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
a.glance-item .glance-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
a.glance-item .glance-label svg {
  width: 14px;
  height: 14px;
  color: var(--purple);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
a.glance-item:hover .glance-num {
  color: var(--purple-dark);
}
a.glance-item:hover .glance-label {
  color: var(--purple);
}
a.glance-item:hover .glance-label svg,
a.glance-item:focus-visible .glance-label svg {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  a.glance-item .glance-label svg {
    opacity: 1;
    transform: none;
  }
}

/* Seminars page: academic-year summary */
.year-summary {
  margin-top: 10px;
  color: var(--grey-595);
  font-weight: 400;
}
.year-summary strong {
  color: var(--ink);
}
.year-summary a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Seminars: Upcoming / Past tabs ---------- */
.sub-tabs {
  display: flex;
  gap: 32px;
  margin: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}
.sub-tabs a {
  display: inline-block;
  padding: 8px 0 10px;
  margin-bottom: -1px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--grey-595);
  border-bottom: 3px solid transparent;
}
.sub-tabs a:hover {
  color: var(--purple);
  text-decoration: none;
}
.sub-tabs a[aria-current="page"] {
  color: var(--purple);
  font-weight: 600;
  border-bottom-color: var(--purple);
}
.sub-tabs .tab-count {
  font-size: 15px;
  font-weight: 400;
  color: var(--grey-959);
}
.sub-tabs a[aria-current="page"] .tab-count {
  color: var(--purple);
}

/* ---------- Topics and search (Seminars pages, home) ---------- */
/* Topic links (home): border boxes like the guide's tags, in sentence case, with a count. On the Seminars
   pages, the topics are a list beside the search box (.topic-picker). */
.topics-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 14px;
  border: 1px solid var(--grey-959);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  cursor: pointer;
}
.topics-strip a:hover {
  border-color: var(--purple);
  color: var(--purple);
  text-decoration: none;
}
.topics-strip .n {
  font-size: 13px;
  color: var(--grey-808);
}
.az-filter__label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--grey-595);
  margin-bottom: 8px;
}
.result-count .sep {
  margin: 0 4px;
}
.result-count a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Link-looking button (e.g. "Clear") */
.text-btn {
  font: inherit;
  color: var(--purple);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text-btn:hover {
  color: var(--purple-dark);
}

/* Search matches */
mark {
  background: rgba(253, 176, 21, 0.35);
  color: inherit;
  padding: 0 1px;
}
.snippet {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--grey-595);
}
.event__content .snippet {
  margin: -8px 0 14px;
}

/* Topics on seminar cards, past rows and the seminar page */
.event__subtitle a {
  color: var(--purple);
}
.event__subtitle a:hover {
  text-decoration: underline;
}
.past-row .p-topics {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--grey-808);
}
.meta-panel .topic-list a {
  font-weight: 600;
}
/* ---------- Shared: long words, high-contrast mode ---------- */
/* Long words and web addresses wrap instead of widening the page. Topic names count too: the editor
   accepts names of up to 60 characters without a space. */
.event__content,
.post__text,
.post__meta,
.person-card,
.prose,
.rich,
.meta-panel,
.past-row > a > span,
.topics-strip a,
.topic-option__name,
.result-count {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Windows high-contrast mode: the menu icon, the current page and pressed buttons stay visible. */
@media (forced-colors: active) {
  .menu-toggle span:not(.visually-hidden) {
    background: ButtonText;
    forced-color-adjust: none;
  }
  [aria-current="page"],
  [aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .top-banner-title {
    color: CanvasText;
  }
}