:root {
  --cityu-magenta: #bf165e;
  --cityu-plum: #6b203e;
  --cityu-blue: #455e93;
  --cityu-orange: #ee7d00;
  --cityu-ink: #2e2e2e;
  --cityu-muted: #666;
  --cityu-line: #e7e7e7;
  --cityu-bg: #f2f1f2;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cityu-bg);
  color: var(--cityu-ink);
  font-family: Lato, "PingFang HK", Arial, Verdana, sans-serif, "Microsoft YaHei";
  font-size: 16px;
}
a { color: inherit; }
img { max-width: 100%; }

.cityu-header { position: sticky; top: 0; z-index: 20; background: var(--white); box-shadow: 0 1px 7px rgb(0 0 0 / 12%); }
.cityu-header-inner {
  position: relative;
  display: flex;
  width: min(1152px, calc(100% - 40px));
  min-height: 120px;
  margin: auto;
  align-items: center;
  gap: 30px;
}
.cityu-department-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 15px; color: #111; text-decoration: none; }
.cityu-logo { width: 142px; height: auto; }
.cityu-department-brand > span { padding-left: 20px; border-left: 1px solid #bbb; color: #111; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.08; white-space: nowrap; }
.cityu-project-brand { min-width: 0; color: #111; text-decoration: none; }
.brand-title { display: grid; gap: 7px; max-width: 560px; color: #111; }
.brand-title strong { color: var(--cityu-magenta); font-size: clamp(22px, 1.95vw, 28px); font-weight: 600; line-height: 1.08; }
.brand-title small { color: #111; font-size: clamp(12px, 1.05vw, 15px); font-weight: 700; line-height: 1.3; }
.quick-links { position: relative; margin-left: auto; }
.quick-links > button {
  min-width: 105px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #272727;
  cursor: pointer;
  font: 600 13px/1 Lato, Arial, sans-serif;
}
.quick-links > button span { margin-left: 5px; }
.quick-links-menu {
  position: absolute;
  top: 36px;
  right: 0;
  display: none;
  min-width: 210px;
  padding: 9px 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  box-shadow: 0 5px 15px rgb(0 0 0 / 22%);
}
.quick-links:hover .quick-links-menu, .quick-links:focus-within .quick-links-menu { display: block; }
.quick-links-menu a { display: block; padding: 10px 20px; color: #272727; font-size: 13px; text-decoration: none; }
.quick-links-menu a + a { border-top: 1px solid #ededed; }
.quick-links-menu a:hover, .quick-links-menu a:focus-visible { color: #9f0d43; background: #fff3ec; }
.cityu-nav { min-height: 44px; background: linear-gradient(90deg, #df7433 0%, #da562b 30%, #cc103c 75%, #9f0d43 100%); }
.cityu-nav-inner {
  display: flex;
  width: min(1152px, calc(100% - 40px));
  min-height: 44px;
  margin: auto;
  align-items: center;
  gap: 48px;
}
.cityu-nav a { position: relative; padding: 10px 0; color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; }
.cityu-nav a::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; background: #fff; content: ''; opacity: 0; transform: scaleX(.25); transition: .2s ease; }
.cityu-nav a:hover::after, .cityu-nav a:focus-visible::after, .cityu-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.cityu-nav .home-link span { display: inline-block; margin-right: 5px; font-size: 18px; line-height: 1; }

.section-kicker {
  margin: 0 0 15px;
  color: var(--cityu-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-section > .section-kicker,
.objectives-section > .section-kicker,
.outputs-heading > .section-kicker {
  font-size: 16px;
}

.section {
  width: min(1152px, calc(100% - 44px));
  margin: 34px auto;
  padding: 48px 42px;
  background: #fff;
  box-shadow: 0 2px 15px rgb(0 0 0 / 15%);
}
.project-section { display: grid; grid-template-columns: 115px minmax(0, 1.15fr) minmax(290px, .85fr); gap: 34px; align-items: start; }
.project-copy h2, .section-heading h2, .outputs-heading h2 {
  margin: 0 0 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--cityu-magenta);
  color: var(--cityu-blue);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.18;
}
.project-copy h2 { font-size: clamp(25px, 2.5vw, 34px); }
.project-copy p { margin: 0 0 15px; color: #555; font-size: 15px; line-height: 1.72; text-align: justify; }
.project-copy .lead { color: #555; font-size: 15px; font-weight: 400; }
.text-link { display: inline-block; margin-top: 9px; color: var(--cityu-magenta); font-size: 13px; font-weight: 700; text-underline-offset: 3px; }
.research-figure { margin: 0; padding: 10px; border: 1px solid var(--cityu-line); background: #fff; box-shadow: 0 2px 15px rgb(0 0 0 / 12%); }
.research-figure img { display: block; width: 100%; height: auto; }
.research-figure figcaption { padding: 10px 4px 3px; color: #777; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

.objectives-section { padding-top: 44px; }
.current-progress-heading { margin-bottom: 28px; }
.section-heading { display: grid; grid-template-columns: 210px 1fr; gap: 34px; align-items: start; margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 0; }
.objective-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.objective-card { display: flex; min-height: 370px; padding: 0 22px 24px; flex-direction: column; background: #fff; box-shadow: 0 2px 15px rgb(0 0 0 / 15%); border-top: 10px solid var(--cityu-magenta); }
.objective-card:nth-child(2) { border-top-color: var(--cityu-blue); }
.objective-card:nth-child(3) { border-top-color: var(--cityu-orange); }
.objective-topline { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 14px; border-bottom: 1px solid var(--cityu-line); color: #777; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.objective-topline span:first-child { color: var(--cityu-blue); font-size: 20px; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.objective-card p { margin: 38px 0 0; color: #555; font-size: 14px; line-height: 1.72; }
.objective-progress { margin-top: auto; padding-top: 26px; }
.objective-progress > span { display: block; margin-bottom: 7px; color: var(--cityu-blue); font-size: 12px; font-weight: 800; text-align: right; }
.objective-progress progress { display: block; width: 100%; height: 12px; border: 0; border-radius: 0; background: #ececf0; }
.objective-progress progress::-webkit-progress-bar { background: #ececf0; }
.objective-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--cityu-magenta), var(--cityu-blue)); }
.objective-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--cityu-magenta), var(--cityu-blue)); }

.members-page { width: min(1152px, calc(100% - 44px)); margin: 24px auto 44px; }
.member-group { margin-top: 18px; padding: 24px 30px 30px; background: #fff; box-shadow: 0 2px 15px rgb(0 0 0 / 15%); }
.members-page > .member-group:first-child { margin-top: 0; }
.member-group > h2 { margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--cityu-magenta); color: var(--cityu-blue); font-size: clamp(23px, 2.6vw, 31px); line-height: 1.15; }
.member-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.directory-card { display: grid; min-height: 148px; padding: 16px; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; border-top: 6px solid var(--cityu-blue); background: #f7f8fb; }
.directory-card:nth-child(even) { border-top-color: var(--cityu-magenta); }
.directory-avatar { display: grid; width: 60px; height: 74px; place-items: center; background: var(--cityu-blue); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.directory-card:nth-child(even) .directory-avatar { background: var(--cityu-magenta); }
.directory-photo { display: block; width: 60px; height: 74px; border: 1px solid #ddd; background: #fff; object-fit: cover; object-position: center top; }
.directory-details h3 { margin: 0 0 7px; color: var(--cityu-blue); font-size: 17px; line-height: 1.25; }
.directory-details p { margin: 0 0 6px; color: #666; font-size: 12px; line-height: 1.45; }
.directory-details .directory-chinese-name { margin-top: -3px; color: #272727; font-family: "PingFang HK", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 15px; font-weight: 700; }
.directory-details .directory-role { color: var(--cityu-magenta); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.directory-details a { color: var(--cityu-blue); font-size: 11px; overflow-wrap: anywhere; text-underline-offset: 2px; }

.outputs-section { padding-top: 50px; }
.smart-grid-section .project-copy { grid-column: 2 / -1; }
.smart-grid-outputs { padding-top: 50px; }
.smart-grid-outputs .outputs-heading h2 { margin-bottom: 0; }
.smart-grid-output-group { padding-bottom: 30px; }
.smart-grid-output-group p { margin: 0; font-size: 16px; line-height: 1.7; }
.outputs-heading { margin-bottom: 24px; }
.output-groups { display: grid; gap: 28px; }
.output-group { padding: 30px 30px 12px; border-top: 10px solid var(--cityu-magenta); background: #fff; box-shadow: 0 2px 15px rgb(0 0 0 / 15%); }
.output-group:nth-child(even) { border-top-color: var(--cityu-blue); }
.output-group-header { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 20px; align-items: start; margin-bottom: 28px; }
.output-group-header > span { color: var(--cityu-magenta); font-size: 30px; font-weight: 800; line-height: 1; }
.output-group:nth-child(even) .output-group-header > span { color: var(--cityu-blue); }
.output-group-header h3 { margin: 0; color: var(--cityu-blue); font-size: 23px; line-height: 1.3; }
.output-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.output-counts span { padding: 6px 8px; border: 1px solid var(--cityu-line); color: #666; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.research-list-block { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 24px; }
.research-list-block + .research-list-block { margin-top: 34px; }
.research-list-block h4 { margin: 14px 0 0; color: var(--cityu-magenta); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.research-list { margin: 0; padding: 0; border-top: 1px solid var(--cityu-line); list-style: none; }
.research-list li { display: grid; grid-template-columns: 34px minmax(0,1fr) 58px; gap: 13px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--cityu-line); }
.research-list .entry-number { padding-top: 2px; color: #999; font-size: 11px; font-weight: 700; }
.research-list p { margin: 0; color: #555; font-size: 13px; line-height: 1.62; }
.research-list a { justify-self: end; padding-top: 2px; color: var(--cityu-magenta); font-size: 9px; font-weight: 700; text-decoration: none; }
.patent-block .research-list { border-top-color: rgb(191 22 94 / 45%); }
.patent-block .research-list li { grid-template-columns: 34px minmax(0,1fr); }

@media (max-width: 999.98px) {
  .cityu-header-inner { min-height: 92px; }
  .cityu-logo { width: 112px; }
  .cityu-department-brand > span { font-size: 22px; }
  .brand-title { max-width: 520px; }
  .brand-title strong { font-size: 22px; }
  .brand-title small { font-size: 13px; }
  .quick-links { display: none; }
  .cityu-nav-inner { min-height: 44px; overflow-x: auto; gap: 24px; }
  .cityu-nav a { white-space: nowrap; }
  .project-section { grid-template-columns: 1fr 1fr; }
  .project-section > .section-kicker { grid-column: 1 / -1; }
  .smart-grid-section .project-copy { grid-column: auto; }
  .section-heading { grid-template-columns: 1fr; gap: 0; }
  .objective-grid { grid-template-columns: 1fr; }
  .objective-card { min-height: 0; }
  .objective-card p { margin-top: 24px; }
  .member-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .output-group-header { grid-template-columns: 48px 1fr; }
  .output-counts { grid-column: 2; justify-content: flex-start; }
  .research-list-block { grid-template-columns: 1fr; gap: 7px; }
  .research-list-block h4 { margin-top: 0; }
}

@media (max-width: 759.98px) {
  .cityu-header-inner { width: calc(100% - 28px); min-height: 76px; }
  .cityu-logo { width: 92px; }
  .cityu-header-inner { gap: 15px; }
  .brand-title { gap: 3px; }
  .brand-title strong { font-size: 16px; }
  .brand-title small { display: none; }
  .cityu-nav-inner { width: calc(100% - 28px); gap: 18px; }
  .cityu-nav a { font-size: 12px; }
  .section { width: calc(100% - 28px); margin-top: 20px; margin-bottom: 20px; padding: 30px 20px; }
  .project-section { grid-template-columns: 1fr; gap: 22px; }
  .project-section > .section-kicker { grid-column: auto; }
  .project-copy h2 { font-size: 25px; }
  .section-heading h2, .outputs-heading h2 { font-size: 29px; }
  .research-figure { margin-top: 6px; }
  .output-group { padding: 24px 18px 8px; }
  .output-group-header { grid-template-columns: 38px 1fr; gap: 12px; }
  .output-group-header h3 { font-size: 19px; }
  .research-list li { grid-template-columns: 28px minmax(0,1fr); gap: 9px; }
  .research-list a { grid-column: 2; justify-self: start; }
  .patent-block .research-list li { grid-template-columns: 28px minmax(0,1fr); }
  .members-page { width: calc(100% - 28px); margin-top: 20px; }
  .member-group { padding: 22px 16px; }
  .member-directory-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.recruitment-banner { display: flex; align-items: center; gap: 24px; padding: 24px 36px; border-top: 4px solid #bf0b56; }
.recruitment-banner h2 { margin: 0 0 8px; color: #425e99; font-size: 24px; }
.recruitment-banner p { margin: 0; font-size: 16px; line-height: 1.6; }
.recruitment-banner > a { flex-shrink: 0; }
.recruitment-page h1 { margin: 0 0 20px; color: #425e99; font-size: 34px; }
.recruitment-page p, .recruitment-page li, .recruitment-page dd { font-size: 16px; line-height: 1.75; }
.recruitment-page a { overflow-wrap: anywhere; }
.recruitment-intro { max-width: 800px; }
.recruitment-position { margin-top: 36px; }
.recruitment-position h2 { padding-bottom: 12px; border-bottom: 1px solid #bf0b56; color: #425e99; font-size: 28px; }
.recruitment-position h3 { margin: 28px 0 12px; color: #425e99; font-size: 21px; }
.recruitment-facts { margin: 24px 0; }
.recruitment-facts > div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.recruitment-facts dt { font-weight: 700; font-size: 16px; line-height: 1.75; }
.recruitment-facts dd { margin: 0; }
.recruitment-page ul { padding-left: 24px; }
.recruitment-page li { padding-left: 4px; margin-bottom: 10px; }
.recruitment-note { padding: 16px 20px; background: #f5f6fa; border-left: 3px solid #425e99; }
.recruitment-page small { font-size: 13px; }
@media (max-width: 759.98px) {
  .recruitment-banner { align-items: flex-start; flex-direction: column; gap: 16px; }
  .recruitment-facts > div { grid-template-columns: 1fr; gap: 4px; }
}