@font-face {
  font-family: 'Roboto';
  src: url(../fonts/Roboto-Regular.ttf);
}
/* ========================================
  Typography
======================================== */
*, ::after, ::before {box-sizing: border-box; margin: 0; padding: 0;}
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; tab-size: 4;}
body {position: relative;font-size: 13px;}
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {font: inherit; border: 0; font-size: 100%; vertical-align: baseline;}
hr {box-sizing: content-box; height: 0; color: inherit; overflow: visible; border: 0; border-top: 1px solid var(--theme-color, #1677ff); margin-block: 1em;}
pre, code, kbd, samp {font-family: 'ui-monospace', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'monospace'; font-size: 1em;}
abbr[title] {border-bottom: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}
a {background-color: transparent; text-decoration: none; color: var(--title-color, #333333); transition: var(--transition-normal, all .4s ease-in-out);}
a:hover {color: var(--zju-red);}
b, strong {font-weight: bolder;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -.25em;}
sup {top: -.5em;}
img {border-style: none; vertical-align: middle; max-width: 100%; height: auto;}

button, input {overflow: visible;}
button, select {text-transform: none;}
fieldset {border: 1px solid currentColor; margin-block: 1em; margin-inline: 0; padding-block: .35em .75em .625em; border-radius: var(--radius-size, 8px);}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0 .5em; white-space: normal;}
progress {display: inline-block; vertical-align: baseline;}
textarea {overflow: auto; vertical-align: top; resize: vertical;}
ol, ul {list-style: none; margin: 0;}
dl {margin-block: 1em;}
dd {margin-inline-start: 0;}
dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {margin: 0;}
table {text-indent: 0; border-color: inherit; border-collapse: collapse; border-spacing: 0; width: 100%; margin-block: 1em;}
td, th {padding: .5em; border: 1px solid var(--border-color);}
iframe {width: 100%; height: 100%;}
dialog {background-color: var(--white-color, #ffffff); border: 1px solid var(--border-color, #d9d9d9); color: var(--title-color, #333333); padding: 1em; width: max-content; max-width: 90%; box-shadow: 0 5px 15px var(--shadow-color, rgba(0, 0, 0, .15)); border-radius: var(--radius-size, 8px); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
dialog:not([open]) {display: none;}
summary {display: list-item; cursor: pointer;}
template {display: none;}
details, audio, video, canvas, article, aside, figcaption, figure, footer, header, main, hgroup, menu, nav, section {display: block;}
audio:not([controls]) {display: none; height: 0;}
svg:not(:root) {overflow: hidden;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
:root {
  /* ───── BRAND — 浙大红 (deepened to a scholarly dark red) ───── */
  --zju-red:        #8C1419;   /* dark red 暗红 — derived from logo #B01F24, deepened */
  --zju-red-deep:   #6A0F13;   /* hover / press / footer */
  --zju-red-bright: #B01F24;   /* original logo red, kept for rare highlights */
  --zju-red-soft:   #BC5A55;   /* tint for dark surfaces */
  --zju-red-pale:   #F0E1DF;   /* very pale wash */
  /* layered deep-red gradients for page top/bottom (not flat) */
  --grad-red-top:  linear-gradient(180deg, #88141A 0%, #6E1014 56%, #570B0E 100%);
  --grad-red-deep: radial-gradient(135% 100% at 14% -18%, rgba(176,31,36,.42) 0%, rgba(140,20,25,0) 56%), linear-gradient(168deg, #8C1419 0%, #6A0F13 58%, #520A0D 100%);
  --zju-red-wash:   #FAF2F1;

  /* ───── INK & PAPER (warm, from EASTYLE) ───── */
  --ink-pine:   #1E1A14;
  --ink-soft:   #2D2820;
  --ink-warm:   #3A332A;

  --paper-rice: #F6EFE3;
  --paper-silk: #FBF7EF;
  --paper-bone: #ECE2CD;
  --paper-deep: #E4DBC7;

  /* Cleaner near-whites for the "modern institutional" look */
  --white:      #FFFFFF;
  --off-white:  #FAFAF8;
  --cloud:      #F4F3F0;

  /* Warm greys */
  --grey-90: #1E1A14;
  --grey-80: #2D2820;
  --grey-70: #4A4338;
  --grey-60: #6B6253;
  --grey-50: #8B8270;
  --grey-40: #A89E8A;
  --grey-30: #C4BBA7;
  --grey-20: #DBD1BC;
  --grey-10: #ECE4D2;

  /* ───── SEMANTIC ───── */
  --fg-1: #1E1A14;
  --fg-2: #4A4338;
  --fg-3: #6B6253;
  --fg-4: #8B8270;
  --fg-on-ink-1: #FBF7EF;
  --fg-on-ink-2: #C4BBA7;

  --border-1: #E4DBC7;          /* hairline on paper */
  --border-2: #DBD1BC;
  --border-ink: #3A332A;
  --border-cool: #E7E5E0;       /* hairline on white */

  /* ───── TYPE FAMILIES — per ZJU spec ───── */
  --font-banner:    "Facile Sans", "Jost", "Roboto", sans-serif;   /* Banner / hero */
  --font-cond:      "Roboto", "Inter", sans-serif;                  /* Nav + H1/H2 */
  --font-body:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body, dates, names */
  --font-news:      "Roboto", "Roboto Serif", Georgia, serif;          /* news & event titles */
  /* back-compat aliases used in older rules */
  --font-serif:     "Roboto", "Roboto Serif", Georgia, serif;
  --font-sans:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif-cn:  "Noto Serif SC", "Songti SC", serif;                       /* Chinese display */
  --font-sans-cn:   "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;

  /* ───── SCALE ───── */
  --fs-hero: clamp(40px, 4.4vw, 62px);
  --fs-h1: clamp(27px, 2.5vw, 38px);
  --fs-h2: clamp(21px, 1.8vw, 28px);
  --fs-h3: clamp(18px, 1.35vw, 21px);
  --fs-h4:      19px;
  --fs-lede: clamp(15px, 0.95vw, 16.5px);
  --fs-body: 15px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:   1.06;
  --lh-display: 1.16;
  --lh-body:    1.68;
  --lh-cn:      1.9;

  --tr-tight: -0.02em;
  --tr-wide:   0.04em;
  --tr-caps:   0.18em;

  /* ───── SPACE ───── */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:64px; --sp-9:88px; --sp-10:192px;

  --maxw: 1080px;

  /* ───── SHADOW (warm) ───── */
  --shadow-soft: 0 1px 2px rgba(74,56,30,.06), 0 4px 14px rgba(74,56,30,.06);
  --shadow-deep: 0 8px 34px rgba(74,56,30,.13);

  /* ───── MOTION ───── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 520ms;
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}

/* ───── Type helpers ───── */
.serif   { font-family: var(--font-serif); }
.sans    { font-family: var(--font-sans); }
.cn      { font-family: var(--font-sans-cn); line-height: var(--lh-cn); }
.cn-serif{ font-family: var(--font-serif-cn); }

h1,h2,h3,h4 { margin: 0; font-weight: 500; }

/* Curatorial kicker label — uppercase, oversized tracking, red dot optional */
.kicker {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--zju-red);
}
.kicker--muted { color: var(--fg-3); }

/* small-caps serif label */
.label-serif {
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 14px;
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
}

.eyebrow-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--zju-red);
}

/* Bilingual stack */
.bi { display: flex; flex-direction: column; gap: 4px; }
.bi .en { font-family: var(--font-serif); }
.bi .zh { font-family: var(--font-sans-cn); color: var(--fg-3); font-size: .82em; }

a { color: inherit; }

/* Link with animated underline thickness */
.ul-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--grey-30);
  transition: text-decoration-thickness var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}
.ul-link:hover { text-decoration-thickness: 2px; text-decoration-color: var(--zju-red); }

.tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--zju-red-pale); color: var(--ink-pine); }

/* Shared layout container */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }

/* Hairline rule */
.rule { border: 0; border-top: 1px solid var(--border-1); margin: 0; }

/* Vertical Chinese (hero accents only) */
.vrl { writing-mode: vertical-rl; font-family: var(--font-serif-cn); letter-spacing: 0.12em; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== Search overlay — full-screen dropdown ===== */
.searchbox.wrapper {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1);
}
.searchbox.wrapper.open {
  pointer-events: auto;
  transform: translateY(0);
}
.searchbox.wrapper .fixhead {
  position: absolute;
  top: 28px;
  right: 32px;
  line-height: 0;
}
.searchbox.wrapper .fixhead .close {
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding:5px;
  opacity: .8;
  transition: opacity .2s ease;
      border-radius: 50%;
      background:var(--zju-red);
}
.searchbox.wrapper .fixhead .close:hover {
  opacity: 1;
}
.searchbox.wrapper .inner {
  width: 100%;
  max-width: 640px;
  padding: 0 32px;
}
.searchbox.wrapper .wp-search form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--border-ink);
  gap: 0;
}
.searchbox.wrapper .search-input {
  flex: 1;
}
.searchbox.wrapper .search-title {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-cond);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  color: var(--fg-1);
  outline: none;
  padding: 16px 0;
}
.searchbox.wrapper .search-title::placeholder {
  color: var(--grey-30);
}
.searchbox.wrapper .search-btn {
  flex: none;
}
.searchbox.wrapper .search-submit {
  border: 0;
  background: transparent;
  font-family: var(--font-cond);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--zju-red);
  cursor: pointer;
  padding: 16px 0 16px 24px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.searchbox.wrapper .search-submit:hover {
  color: var(--zju-red-deep);
}

body.search-open {
  overflow: hidden;
}

.l-banner{height:100%;background-size:cover;    background-position: center;}
.l-banner img{display:none;}



/* ===== Article  ===== */
.art-wrap { max-width: 720px; margin: 0 auto; padding: 52px 28px 76px; }
.crumb { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: .05em; color: var(--fg-3); margin-bottom: 30px; }
.crumb a { color: var(--fg-3); text-decoration: none; }
.crumb a:hover { color: var(--zju-red); }
.art-kicker { font-family: var(--font-cond); font-weight: 700; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--zju-red); }
h1.art-title { font-family: var(--font-news); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.22; color: var(--fg-1); margin: 12px 0 8px; }
.art-zh { font-family: var(--font-serif-cn); font-size: 17px; color: var(--fg-3); }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-cond); font-size: 13px; color: var(--fg-3); margin-top: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--zju-red); }
.article-body { margin-top: 36px; font-size: 16.5px; line-height: 1.85; color: var(--fg-2); }
.article-body p { margin: 0 0 1.5em; }
.article-body h2 { font-family: var(--font-cond); font-weight: 700; font-size: 22px; color: var(--fg-1); margin: 2em 0 .8em; }
.article-body h3 { font-family: var(--font-cond); font-weight: 700; font-size: 18px; color: var(--fg-1); margin: 1.8em 0 .7em; }
.article-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.article-body figure { margin: 26px 0; }
.article-body figcaption { font-size: 13px; line-height: 1.6; color: var(--fg-3); text-align: center; margin-top: 10px; }
.article-body blockquote { margin: 2em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--zju-red); font-family: var(--font-news); font-style: italic; font-size: 18px; color: var(--fg-1); }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.article-body li { margin-bottom: .4em; }
.article-body a { color: var(--zju-red); text-decoration: none; border-bottom: 1px solid rgba(140,20,25,.35); }
.article-body a:hover { border-bottom-color: var(--zju-red); }
.article-body :is(span, font) { font-family: inherit !important; color: inherit; }
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--border-cool); display:none;}
.art-nav a { font-family: var(--font-cond); font-size: 13px; line-height: 1.5; color: var(--fg-2); text-decoration: none; }
.art-nav a:hover { color: var(--zju-red); }
.art-nav .next { text-align: right; }
.back-list { display: block; text-align: center; margin-top: 34px; font-family: var(--font-cond); font-weight: 700; font-size: 13.5px; letter-spacing: .06em; color: var(--fg-1); text-decoration: none; }
.back-list:hover { color: var(--zju-red); }
@media (max-width: 999px) {
  .art-wrap { padding: 38px 20px 60px; }
  .article-body { font-size: 15.5px; }
  .art-nav { grid-template-columns: 1fr; } .art-nav .next { text-align: left; }
}
.fig-ph { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: var(--paper-rice); border: 1px dashed var(--border-cool); color: var(--fg-3); font-family: var(--font-cond); font-size: 13px; letter-spacing: .06em; }

/* ===== News list  ===== */
.art-wrap--list { max-width: 820px; }
.art-wrap--list .art-title { margin-bottom: 4px; }
.news-roll { margin-top: 38px; border-top: 2px solid var(--zju-red); }
.nl-item { display: grid; grid-template-columns: 112px 96px 1fr 24px; gap: 18px; align-items: baseline; padding: 22px 2px; border-bottom: 1px solid var(--border-cool); text-decoration: none; }
.nl-date { font-family: var(--font-cond); font-size: 13px; color: var(--fg-3); letter-spacing: .03em; }
.nl-tag { font-family: var(--font-cond); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--zju-red); }
.nl-title { font-family: var(--font-news); font-size: 17.5px; line-height: 1.45; color: var(--fg-1); transition: color .2s; }
.nl-arr { font-size: 15px; color: var(--fg-3); transition: transform .2s, color .2s; justify-self: end; }
.nl-item:hover .nl-title { color: var(--zju-red); }
.nl-item:hover .nl-arr { color: var(--zju-red); transform: translateX(4px); }
.nl-pager { display: flex; gap: 14px; justify-content: center; margin-top: 40px; font-family: var(--font-cond); font-weight: 700; font-size: 14px; }
.nl-pager a { color: var(--fg-2); text-decoration: none; }
.nl-pager a:hover { color: var(--zju-red); }
.nl-pager .cur { color: var(--zju-red); border-bottom: 2px solid var(--zju-red); }
.nl-pager .dots { color: var(--fg-3); }
.wp_paging{margin-top: 20px;margin-bottom: 60px;}
@media (max-width: 999px) {
  .nl-item { grid-template-columns: 1fr 24px; gap: 4px 12px; }
  .nl-date, .nl-tag { display: inline-block; }
  .nl-date { grid-column: 1; } .nl-tag { grid-column: 1; }
  .nl-title { grid-column: 1; } .nl-arr { grid-row: 3; }
}

/* ===== About · full-scroll Swiss layout ===== */
.ab-hero{position:relative;height:clamp(380px,52vh,560px);overflow:hidden;background:var(--ink-pine);}
.ab-hero>img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;}
.ab-hero>img{filter:saturate(1.03);}
.ab-hero .ab-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,14,.84) 0%,rgba(20,18,14,.34) 50%,rgba(20,18,14,.46) 100%),linear-gradient(90deg,rgba(20,18,14,.6) 0%,rgba(20,18,14,.05) 62%);}
.ab-hero .container{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:42px;}
.ab-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;}
.ab-eyebrow::before{content:"";width:28px;height:2px;background:var(--zju-red);display:inline-block;}
.ab-hero h1{font-family:var(--font-cond);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.015em;color:#fff;margin:16px 0 0;}
.ab-h-zh{font-family:var(--font-serif-cn);font-size:15px;color:rgba(255,255,255,.84);margin-top:10px;letter-spacing:.06em;}
.ab-crumb{border-bottom:1px solid var(--border-cool);}
.ab-crumb .container{padding-top:15px;padding-bottom:15px;font-size:12.5px;color:var(--fg-3);letter-spacing:.02em;}
.ab-crumb a{color:#6b6253;text-decoration:none;}
.ab-crumb a:hover{color:var(--zju-red);}
.ab-sec{border-top:1px solid var(--border-cool);}
.ab-sec:first-child{border-top:0;}
.ab-grid{display:grid;grid-template-columns:minmax(190px,3fr) minmax(0,8fr);gap:46px 76px;padding:94px 0;}
.ab-no{display:block;font-family:var(--font-cond);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.01em;color:var(--zju-red);}
.ab-h{font-family:var(--font-cond);font-weight:700;font-size:25px;line-height:1.18;color:var(--ink-pine);margin:18px 0 0;}
.ab-zh{display:block;font-family:var(--font-serif-cn);font-size:13.5px;color:var(--fg-3);margin-top:8px;letter-spacing:.05em;}
.ab-body{max-width:64ch;}
.ab-body.article-body{margin-top:0;}
.ab-body--wide{max-width:none;}
.ab-body .news-roll{margin-top:0;}
.ab-body .panel-note{font-size:13px;color:var(--fg-3);margin:0 0 18px;}
.ab-body .panel-sub{font-size:13.5px;color:var(--fg-3);margin-top:22px;}
.ab-all{display:inline-block;margin-top:22px;font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--zju-red);text-decoration:none;}
.ab-all:hover{text-decoration:underline;}
@media(max-width:880px){
  .ab-grid{grid-template-columns:1fr;gap:20px;padding:58px 0;}
  .ab-no{font-size:38px;}
  .ab-h{font-size:22px;}
  .ab-body{max-width:none;}
}
.fill-text{--fill:var(--ink-pine);--base:#D9D5CC;background-image:linear-gradient(90deg,var(--fill) 50%,var(--base) 50%);background-size:200% 100%;background-position-x:100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.fill-text--red{--fill:var(--zju-red);--base:#E8CFC8;}
.ab-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.ab-reveal.in{opacity:1;transform:none;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fill-text{color:var(--ink-pine);-webkit-text-fill-color:currentColor;background:none;}
  .fill-text--red{color:var(--zju-red);}
}
@media(prefers-reduced-motion:reduce){
  .ab-reveal{opacity:1;transform:none;}
  .fill-text{color:var(--ink-pine)!important;-webkit-text-fill-color:currentColor!important;background:none!important;}
  .fill-text--red{color:var(--zju-red)!important;}
}

/* ===== campus archive ===== */
.fac-lead{font-size:18px;line-height:1.72;color:var(--fg-1);max-width:640px;}
.fac-lead+.fac-lead{margin-top:14px;}
.archive{margin-top:38px;}
.arc-eyebrow{font-family:var(--font-cond);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.arc-eyebrow::after{content:"";flex:1;height:1px;background:var(--border-cool);}
.arc-grid{display:flex;flex-direction:column;gap:10px;}
.arc-row{display:flex;gap:10px;}
.arc-item{margin:0;overflow:hidden;cursor:pointer;background:var(--paper-rice);position:relative;}
.arc-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease);}
.arc-item:hover img{transform:scale(1.05);}
.arc-item::after{content:"";position:absolute;inset:0;background:rgba(30,26,20,0);transition:background .35s var(--ease);}
.arc-item:hover::after{background:rgba(30,26,20,.07);}
.arc-lb{position:fixed;inset:0;z-index:1000;background:rgba(18,16,12,.93);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--ease);}
.arc-lb.on{opacity:1;visibility:visible;}
.arc-lb img{max-width:88vw;max-height:82vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.5);}
.arc-cap{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:var(--paper-silk);font-size:13px;letter-spacing:.03em;padding:0 20px;}
.arc-x{position:absolute;top:20px;right:26px;color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.78;transition:opacity .2s;}
.arc-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:34px;cursor:pointer;opacity:.7;padding:20px;-webkit-user-select:none;user-select:none;transition:opacity .2s;}
.arc-prev{left:10px;} .arc-next{right:10px;}
.arc-nav:hover,.arc-x:hover{opacity:1;}
@media(max-width:760px){.arc-row{gap:6px;}.arc-grid{gap:6px;}.fac-lead{font-size:16px;}}
.arc-enter{display:block;width:100%;height:300px;position:relative;border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;background:var(--paper-rice);}
.arc-enter img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .85s var(--ease);}
.arc-enter:hover img{transform:scale(1.045);}
.arc-enter-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,14,.6),rgba(20,18,14,0) 52%);}
.arc-enter-meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:22px 26px;color:var(--paper-silk);}
.arc-enter-ey{font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.arc-enter-go{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.04em;display:inline-flex;align-items:center;}
.arc-enter-go i{font-style:normal;margin-left:9px;transition:transform .3s var(--ease);}
.arc-enter:hover .arc-enter-go i{transform:translateX(5px);}
.arc-room{position:fixed;inset:0;z-index:900;background:var(--paper-silk);overflow:auto;opacity:0;visibility:hidden;transition:opacity .35s var(--ease);}
.arc-room.on{opacity:1;visibility:visible;}
.arc-room-inner{max-width:1180px;margin:0 auto;padding:74px 28px 90px;}
.arc-room-x{position:fixed;top:20px;right:30px;color:var(--ink-pine);font-size:32px;line-height:1;cursor:pointer;z-index:910;opacity:.65;transition:opacity .2s;}
.arc-room-x:hover{opacity:1;}


body { background: var(--white); color: var(--fg-1); }

  /* ===== Placeholder imagery ===== */
  .ph { position: relative; overflow: hidden; background:
        linear-gradient(135deg, #efeae0 0%, #e3ddcf 55%, #d8d1bf 100%); }
  .ph::after { content: attr(data-cap); position: absolute; left: 14px; bottom: 12px;
        font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: rgba(74,67,56,.6); }
  .ph--ink { background: linear-gradient(150deg, #2a2620 0%, #1b1812 100%); }
  .ph--ink::after { color: rgba(251,247,239,.5); }
  .ph--blue { background: linear-gradient(150deg, #3f5d77 0%, #2c4258 100%); }
  .ph--blue::after { color: rgba(255,255,255,.6); }
  .ph--red { background: linear-gradient(150deg, #8E1419 0%, #5e0f13 100%); }
  .ph--red::after { color: rgba(255,255,255,.55); }

  /* ===== Top utility bar ===== */
  .util { background: var(--off-white); border-bottom: 1px solid var(--border-cool); }
  .util .container { display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 40px; }
  .util a { font-size: 12.5px; color: var(--fg-3); text-decoration: none; letter-spacing: .02em; white-space: nowrap;
        display: inline-flex; align-items: center; gap: 7px; transition: color var(--dur) var(--ease); }
  .util a:hover { color: var(--zju-red); }
  .util .sep { width: 1px; height: 13px; background: var(--border-cool); }
  .util .search { display: flex; align-items: center; gap: 8px; }
  .util .search svg { width: 14px; height: 14px; stroke: currentColor; }

  /* ===== Header ===== */
  header.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
        backdrop-filter: blur(16px) saturate(120%); border-bottom: 1px solid var(--border-cool); }
  header.site .container { display: flex; align-items: center; justify-content: space-between; height: 88px; }
  .brand img { height: 46px; display: block; }
  nav.main { display: flex; align-items: center; gap: 16px; }
  nav.main a { font-family: "Roboto"; font-weight: 700; font-size: 15px; color: var(--fg-1); text-decoration: none; position: relative; padding: 8px 0; letter-spacing: .01em; white-space: nowrap;
        transition: color var(--dur) var(--ease); }
  nav.main a::after { content:''; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
        background: var(--zju-red); transition: right var(--dur) var(--ease); }
  nav.main a:hover { color: var(--zju-red); }
  nav.main a:hover::after, nav.main a.active::after { right: 0; }
  nav.main a.active { color: var(--zju-red); font-weight: 500; }
  /* Global dropdown — full-width mega panel */
  .nav-item { position: static; display: inline-flex; align-items: center; }
  .nav-item .caret { font-size: 9px; margin-left: 6px; opacity: .6; display: inline-block; transition: transform .25s var(--ease); }
  .nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }
  .submenu { position: absolute; top: 100%; left: 0; right: 0; background: var(--off-white);
        border-top: 2px solid var(--zju-red); box-shadow: 0 26px 52px rgba(30,26,20,.13);
        opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; z-index: 80;
        transition: opacity .24s var(--ease), transform .24s var(--ease); }
  .submenu::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
  .nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .submenu-inner { max-width: var(--maxw); margin: 0 auto; padding: 42px var(--sp-5) 48px;
        display: grid; grid-template-columns: minmax(170px, .8fr) 2.4fr; gap: 48px; align-items: start; }
  .sm-eyebrow { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--zju-red); }
  .sm-intro p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--fg-3); max-width: 28ch; }
  .sm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 52px; padding-left: 48px; border-left: 1px solid var(--border-cool); }
  .submenu .sm-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px;
        font-family: var(--font-cond); font-weight: 400; font-size: 17px; color: var(--ink-pine); text-decoration: none;
        padding: 12px 2px; letter-spacing: .01em; transition: color .18s var(--ease); }
  .submenu .sm-links a i { font-style: normal; color: var(--zju-red); opacity: 0; transform: translateX(-7px);
        transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .submenu .sm-links a::after { display: none; }
  .submenu .sm-links a:hover { color: var(--zju-red); }
  .submenu .sm-links a:hover i { opacity: 1; transform: translateX(0); }

  /* ===== Hero ===== */
  .hero { position: relative; height: 460px; overflow: hidden; }
  .hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
  .hero .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .hero .slide.on { opacity: 1; }
  .hero .scrim { position: absolute; inset: 0; background:
        linear-gradient(90deg, rgba(20,18,14,.82) 0%, rgba(20,18,14,.40) 42%, rgba(20,18,14,.06) 74%, rgba(20,18,14,0) 100%),
        linear-gradient(0deg, rgba(20,18,14,.55) 0%, rgba(20,18,14,0) 40%); }
  .hero .container { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
        justify-content: center; }
  .hero .caps { max-width: 540px; display: flex; flex-direction: column; align-items: flex-start; }
  .hero .kick { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .hero .kick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zju-red); }
  .hero .kick span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: #fff; }
  .hero h1 { font-family: var(--font-banner); font-weight: 600; font-size: clamp(23px, 2.3vw, 33px);
        line-height: 1.12; color: #fff; letter-spacing: -.015em; }
  .hero .zh { font-family: var(--font-serif-cn); font-size: 16px; color: rgba(255,255,255,.88);
        letter-spacing: .06em; margin-top: 12px; max-width: 40ch; }
  .hero p { font-size: 14.5px; line-height: 1.6; color: rgba(251,247,239,.85); max-width: 44ch; margin: 16px 0 24px; }
  .hero .cta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
        padding: 12px 24px; background: #fff; color: var(--ink-pine); text-decoration: none; letter-spacing: .02em;
        border-radius: 2px; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
  .hero .cta:hover { background: var(--zju-red); color: #fff; }
  .hero .dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4;
        display: flex; gap: 10px; }
  .hero .dots button { width: 30px; height: 3px; border: 0; background: rgba(255,255,255,.4); cursor: pointer;
        padding: 0; transition: background var(--dur) var(--ease); }
  .hero .dots button.on { background: #fff; }

  /* ===== Section scaffolding ===== */
  section.band { padding: var(--sp-8) 0; }
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
  .sec-head .lhs { display: flex; flex-direction: column; gap: 10px; }
  .sec-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
        color: var(--zju-red); }
  .sec-head h2 { font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-h2);
        letter-spacing: -.01em; color: var(--ink-pine); }
  .see-all { font-size: 13px; color: var(--fg-2); text-decoration: none; letter-spacing: .08em;
        text-transform: uppercase; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
  .see-all:hover { color: var(--zju-red); }

  /* ===== Global cards ===== */
  .global { background: var(--off-white); }
  .g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .g-card { background: #fff; border: 1px solid var(--border-cool); text-decoration: none; color: inherit;
        display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease); }
  .g-card:hover { border-color: var(--zju-red); }
  .g-card .ph { aspect-ratio: 16/9; }
  .g-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block;
        filter: grayscale(1) contrast(1.03); transition: filter .55s var(--ease); }
  .g-card:hover .ph img { filter: grayscale(0) contrast(1); }
  .g-card .gb { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
  .g-card .no { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--zju-red); }
  .g-card h3 { font-family: var(--font-cond); font-weight: 500; font-size: 22px; line-height: 1.24;
        margin: 12px 0 6px; color: var(--ink-pine); }
  .g-card .zh { font-family: var(--font-sans-cn); font-size: 13px; color: var(--fg-3); }
  .g-card p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 14px 0 0; }
  .g-card .more { margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--zju-red);
        display: inline-flex; align-items: center; gap: 8px; }

  /* ===== Highlights + News ===== */
  .hn-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; }
  .hl-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .feat { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
        border: 1px solid var(--border-cool); text-decoration: none; color: inherit; overflow: hidden;
        transition: border-color var(--dur) var(--ease); }
  .feat:hover { border-color: var(--zju-red); }
  .feat .ph { min-height: 320px; }
  .feat .fb { padding: 34px 34px 36px; display: flex; flex-direction: column; justify-content: center; }
  .feat .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--zju-red); }
  .feat h3 { font-family: var(--font-news); font-weight: 500; font-size: 29px; line-height: 1.18;
        margin: 14px 0 4px; color: var(--ink-pine); }
  .feat .zh { font-family: var(--font-sans-cn); font-size: 15px; color: var(--fg-3); }
  .feat p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 16px 0 0; }
  .feat .meta { margin-top: 20px; font-size: 12.5px; color: var(--fg-3); letter-spacing: .04em; }
  .feat--exhibition { display: block; grid-template-columns: none; }
  .feat--exhibition .feat-media { line-height: 0; overflow: hidden; }
  .feat--exhibition .feat-media img { width: 100%; height: auto; display: block; transition: transform var(--dur) var(--ease); }
  .feat--exhibition:hover .feat-media img { transform: scale(1.02); }
  .sm-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
  .sm-card .ph { aspect-ratio: 16/10; margin-bottom: 16px; }
  .sm-card .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--zju-red); }
  .sm-card h4 { font-family: var(--font-news); font-weight: 500; font-size: 19px; line-height: 1.3; margin: 10px 0 6px;
        color: var(--ink-pine); transition: color var(--dur) var(--ease); }
  .sm-card:hover h4 { color: var(--zju-red); }
  .sm-card--text { border-top: 2px solid var(--zju-red); padding-top: 16px; }
  .sm-card--text .tag { margin-top: 0; }
  .sm-card .meta { font-size: 12.5px; color: var(--fg-3); }
  .news-col .news-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .news-col .sec-label { margin-bottom: 0; }
  .news-list { display: flex; flex-direction: column; }
  .news-item { display: block; padding: 20px 0; border-bottom: 1px solid var(--border-cool); text-decoration: none;
        color: inherit; transition: padding-left var(--dur) var(--ease); }
  .news-item:first-child { border-top: 1px solid var(--border-cool); }
  .news-item:hover { padding-left: 8px; }
  .news-item .date { font-family: var(--font-body); font-size: 13px; letter-spacing: .02em; color: var(--zju-red); }
  .news-item h4 { font-family: var(--font-news); font-weight: 500; font-size: 17.5px; line-height: 1.34;
        margin: 7px 0 0; color: var(--ink-pine); }
  .news-more { margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
        color: var(--fg-2); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
  .news-more:hover { color: var(--zju-red); }

  /* ===== Events ===== */
  .events { background: var(--off-white); }
  .ev-head { margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .ev-head .sec-label { display: block; margin-bottom: 10px; }
  .ev-head h2 { font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-h2); color: var(--ink-pine); }
  .ev-head-ctrl { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
  .ev-nav { width: 38px; height: 38px; border: 1px solid var(--border-cool); background: #fff; color: var(--ink-pine);
        font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .ev-nav:hover { border-color: var(--zju-red); color: var(--zju-red); }
  .ev-nav:disabled { opacity: .32; cursor: default; border-color: var(--border-cool); color: var(--ink-pine); }
  .ev-archive-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
        border: 1px solid var(--zju-red); background: #fff; color: var(--zju-red); cursor: pointer;
        font-family: var(--font-cond); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
  .ev-archive-btn:hover { background: var(--zju-red); color: #fff; }
  .ev-archive-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
  .ev-scroll { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
        padding-bottom: 16px; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--zju-red-soft) var(--border-cool); }
  .ev-scroll::-webkit-scrollbar { height: 6px; }
  .ev-scroll::-webkit-scrollbar-track { background: var(--border-cool); }
  .ev-scroll::-webkit-scrollbar-thumb { background: var(--zju-red-soft); }
  .ev-scroll .ev-card { flex: 0 0 300px; scroll-snap-align: start; }
  .ev-card { background: #fff; border: 1px solid var(--border-cool); text-decoration: none; color: inherit;
        display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease); }
  .ev-card:hover { border-color: var(--zju-red); }
  .ev-poster { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-rice); }
  .ev-poster img { width: 100%; height: 100%; object-fit: cover; display: block;
        transition: transform var(--dur) var(--ease); }
  .ev-card:hover .ev-poster img { transform: scale(1.03); }
  .ev-poster .badge { position: absolute; top: 0; left: 0; background: var(--zju-red); color: #fff;
        font-family: var(--font-cond); font-weight: 700; padding: 10px 14px; text-align: center; line-height: 1; }
  .ev-poster .badge .d { font-size: 22px; display: block; }
  .ev-poster .badge .m { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
  .ev-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
  .ev-body .type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--zju-red); }
  .ev-body .zh-sub { font-family: var(--font-serif-cn); font-size: 12.5px; line-height: 1.5; color: var(--fg-3); margin-top: 8px; }
  .ev-body h4 { font-family: var(--font-news); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 10px 0 0;
        color: var(--ink-pine); }
  .ev-body .loc { margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--fg-3); display: flex; gap: 7px; align-items: center; }
  .ev-body .loc svg { width: 13px; height: 13px; stroke: var(--zju-red); flex: none; }

  /* ===== Lecture Archive (modal) ===== */
  .arch-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center;
        padding: 24px; background: rgba(30,26,20,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .arch-overlay.open { display: flex; }
  .arch-panel { position: relative; width: 100%; max-width: 760px; max-height: 86vh; overflow: hidden;
        background: var(--paper-silk); border-top: 4px solid var(--zju-red); display: flex; flex-direction: column;
        box-shadow: 0 24px 70px rgba(0,0,0,.42); }
  .arch-close { position: absolute; top: 12px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent;
        font-size: 28px; line-height: 1; color: var(--fg-3); cursor: pointer; transition: color var(--dur) var(--ease); }
  .arch-close:hover { color: var(--zju-red); }
  .arch-head { padding: 34px 40px 22px; border-bottom: 1px solid var(--border-cool); flex: none; }
  .arch-head .sec-label { display: block; margin-bottom: 8px; }
  .arch-head h3 { font-family: var(--font-cond); font-weight: 700; font-size: 30px; color: var(--ink-pine); line-height: 1.1; }
  .arch-head p { font-family: var(--font-serif-cn); font-size: 13px; color: var(--fg-3); margin-top: 6px; }
  .arch-list { overflow-y: auto; padding: 4px 40px 36px; }
  .arch-group { margin-top: 28px; }
  .arch-group:first-child { margin-top: 14px; }
  .arch-group .grp-label { font-family: var(--font-cond); font-weight: 700; font-size: 12px; text-transform: uppercase;
        letter-spacing: .14em; color: var(--zju-red); padding-bottom: 10px; border-bottom: 1px solid var(--border-cool); }
  .arch-item { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border-cool); }
  .arch-item .a-date { font-family: var(--font-cond); font-weight: 700; font-size: 14px; color: var(--ink-pine); line-height: 1.35; }
  .arch-item .a-date span { display: block; font-weight: 400; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }
  .arch-item .a-en { font-family: var(--font-news); font-size: 16px; line-height: 1.35; color: var(--ink-pine); }
  .arch-item .a-zh { font-family: var(--font-serif-cn); font-size: 13px; line-height: 1.55; color: var(--fg-2); margin-top: 5px; }
  .arch-item .a-meta { font-size: 12px; color: var(--fg-3); margin-top: 8px; }
  body.arch-lock { overflow: hidden; }

  /* ===== Footer ===== */
  footer.site { background: var(--grad-red-deep); color: rgba(255,255,255,.82); }
  footer.site .container { padding-top: 52px; padding-bottom: 32px; }
  .f-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px;
        border-bottom: 1px solid rgba(255,255,255,.18); }
  .f-brand img { height: 50px; margin-bottom: 20px; }
  .f-brand p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 44ch; }
  .f-contact { margin-top: 18px; display: grid; gap: 7px; max-width: 44ch; }
  .f-contact div { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8); }
  .f-contact .fc-k { flex: 0 0 42px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding-top: 1px; }
  .f-contact a { color: rgba(255,255,255,.92); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); transition: border-color var(--dur) var(--ease); }
  .f-contact a:hover { border-color: #fff; }
  .f-col h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #fff; margin: 0 0 16px; font-weight: 600; }
  .f-col a { display: block; font-size: 14px; color: rgba(255,255,255,.82); text-decoration: none; padding: 6px 0;
        transition: color var(--dur) var(--ease); }
  .f-col a:hover { color: #fff; }
  .f-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 12px;
        color: rgba(255,255,255,.62); letter-spacing: .02em; }
  .f-bottom .social { display: flex; gap: 16px; display:none;}
  .f-bottom .social a { color: rgba(255,255,255,.7); text-decoration: none; }
  .f-bottom .social a:hover { color: #fff; }

  /* ===== About + Stats ===== */
  .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; margin-bottom: 72px; }
  .about-text .sec-label { display: block; margin-bottom: 18px; }
  .about-text h2 { font-family: var(--font-cond); font-weight: 700; font-size: clamp(25px,2.6vw,38px);
        letter-spacing: -.01em; color: var(--ink-pine); line-height: 1.08; }
  .about-copy p { font-size: 17px; line-height: 1.74; color: var(--fg-2); margin: 0 0 18px; max-width: 56ch; }
  .about-copy .text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; white-space: nowrap;
        font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--zju-red); text-decoration: none; }
  .about-copy .text-link:hover { gap: 12px; }
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink-pine); }
  .stat-row .stat { padding: 28px 28px 0 0; }
  .stat-row .stat + .stat { border-left: 1px solid var(--border-cool); padding-left: 32px; }
  .stat-row .num { font-family: var(--font-cond); font-weight: 700; font-size: 37px; line-height: 1; color: var(--ink-pine); }
  .stat-row .num span { color: var(--zju-red); }
  .stat-row .cap { font-size: 13px; color: var(--fg-3); margin-top: 12px; letter-spacing: .02em; line-height: 1.4; }

  /* ===== Academics / Disciplines ===== */
  .disc-grid { display: grid; grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--border-cool); border-left: 1px solid var(--border-cool); }
  .disc { position: relative; overflow: hidden; padding: 34px 32px 38px; border-right: 1px solid var(--border-cool);
        border-bottom: 1px solid var(--border-cool); background: var(--paper-silk); text-decoration: none; color: inherit;
        transition: background .45s var(--ease); }
  .disc .di-num { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--zju-red); transition: color .4s var(--ease); }
  .disc h3 { font-family: var(--font-cond); font-weight: 500; font-size: 24px; margin: 16px 0 4px; color: var(--ink-pine); transition: color .4s var(--ease); }
  .disc .zh { font-family: var(--font-sans-cn); font-size: 13.5px; color: var(--fg-3); transition: color .4s var(--ease); }
  .disc p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 16px 0 0; transition: color .4s var(--ease); }
  .disc .arr { margin-top: 18px; font-size: 18px; color: var(--zju-red); opacity: 0; transform: translateX(-6px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color .4s var(--ease); }
  .disc:hover { background: var(--ink-pine); }
  .disc:hover h3 { color: #fff; }
  .disc:hover .zh, .disc:hover p { color: var(--fg-on-ink-2); }
  .disc:hover .di-num { color: var(--zju-red-soft); }
  .disc:hover .arr { opacity: 1; transform: translateX(0); color: #fff; }
  .disc--cta { background: var(--ink-pine); }
  .disc--cta h3, .disc--cta .di-num { color: #fff; }
  .disc--cta .zh { color: var(--fg-on-ink-2); }
  .disc--cta p { color: var(--fg-on-ink-2); }
  .disc--cta .arr { color: #fff; opacity: 1; transform: none; }
  .disc--cta:hover { background: var(--zju-red-deep); }
  .disc--cta:hover .di-num { color: #fff; }

  /* ===== The Museum (split feature) ===== */
  .museum-grid { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 480px; }
  .museum-grid .img { position: relative; }
  .museum-grid .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .museum-grid .panel { background: var(--ink-pine); color: var(--fg-on-ink-1); padding: 72px 60px;
        display: flex; flex-direction: column; justify-content: center; }
  .museum-grid .panel .sec-label { color: var(--zju-red-soft); margin-bottom: 16px; }
  .museum-grid .panel h2 { font-family: var(--font-cond); font-weight: 700; font-size: clamp(25px,2.4vw,34px);
        line-height: 1.1; color: #fff; letter-spacing: -.01em; }
  .museum-grid .panel .zh { font-family: var(--font-serif-cn); font-size: 16px; color: rgba(251,247,239,.7); margin-top: 12px; }
  .museum-grid .panel p { font-size: 16px; line-height: 1.7; color: var(--fg-on-ink-2); margin: 24px 0 32px; max-width: 42ch; }
  .museum-grid .panel .acts { display: flex; align-items: center; gap: 24px; }
  .btn-light { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500;
        padding: 14px 28px; background: #fff; color: var(--ink-pine); text-decoration: none; letter-spacing: .02em;
        border-radius: 2px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
  .btn-light:hover { background: var(--zju-red); color: #fff; }
  .ghost-light { font-size: 14px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4);
        padding-bottom: 3px; transition: border-color var(--dur) var(--ease); }
  .ghost-light:hover { border-color: var(--zju-red-soft); }

  /* ===== Admissions ===== */
  .admissions { background: var(--ink-pine); }
  .admissions .container { display: block; }
  .adm-head { max-width: 64ch; }
  .admissions .sec-label { color: var(--zju-red-soft); display: block; margin-bottom: 16px; }
  .admissions h2 { font-family: var(--font-cond); font-weight: 700; font-size: clamp(27px,2.8vw,40px);
        color: #fff; letter-spacing: -.01em; }
  .admissions .h2-zh { font-family: var(--font-serif-cn); font-size: 17px; color: rgba(251,247,239,.74);
        letter-spacing: .06em; margin-top: 14px; }
  .admissions p { font-size: 17px; line-height: 1.65; color: var(--fg-on-ink-2); max-width: 56ch; margin: 18px 0 0; }
  .adm-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px;
        border-top: 1px solid rgba(255,255,255,.2); }
  .adm-card { position: relative; display: flex; flex-direction: column; padding: 34px 36px 32px;
        text-decoration: none; color: #fff; border-left: 1px solid rgba(255,255,255,.2);
        transition: background var(--dur) var(--ease); }
  .adm-card:first-child { border-left: 0; }
  .adm-card:hover { background: rgba(255,255,255,.055); }
  .adm-card .adm-no { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--zju-red-soft); }
  .adm-card .adm-en { font-family: var(--font-cond); font-weight: 500; font-size: 23px; line-height: 1.2;
        margin: 14px 0 5px; color: #fff; }
  .adm-card .adm-zh { font-family: var(--font-sans-cn); font-size: 13.5px; color: var(--fg-on-ink-2); }
  .adm-card .adm-arr { margin-top: 26px; font-size: 19px; color: var(--zju-red-soft);
        transition: transform var(--dur) var(--ease); }
  .adm-card:hover .adm-arr { transform: translateX(7px); }

  /* ===== Research directory (dark) ===== */
  .research-sec { background: var(--ink-pine); }
  .research-sec .sec-head h2 { color: #fff; }
  .research-sec .sec-label { color: var(--zju-red-soft); }
  .research-sec .see-all { color: var(--fg-on-ink-2); }
  .research-sec .see-all:hover { color: #fff; }
  .res-intro { font-size: 16.5px; line-height: 1.7; color: var(--fg-on-ink-2); max-width: 70ch; margin: 4px 0 46px; }
  .res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; }
  .rg-label { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .14em; color: var(--zju-red-soft); margin: 0; }
  .rg-label .ct { font-family: var(--font-cond); color: rgba(255,255,255,.4); letter-spacing: 0; }
  .res-group ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.28); }
  .res-group li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .res-group li a { display: block; padding: 13px 0; font-size: 15px; color: var(--fg-on-ink-1); text-decoration: none;
        line-height: 1.42; transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease); }
  .res-group li a:hover { padding-left: 8px; color: var(--zju-red-soft); }

  @media (max-width: 1080px) {
    nav.main { gap: 16px; }
    .hn-grid { grid-template-columns: 1fr; }
    .arch-head, .arch-list { padding-left: 30px; padding-right: 30px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .disc-grid { grid-template-columns: repeat(2, 1fr); }
    .admissions .container { display: block; }
    .res-cols { grid-template-columns: 1fr; gap: 36px; }
    .museum-grid { grid-template-columns: 1fr; }
    .museum-grid .img { min-height: 320px; }
    .museum-grid .panel { padding: 48px 40px; }
  }

  /* ===== Hamburger button ===== */
  .nav-toggle { display: none; width: 42px; height: 42px; border: 0; background: transparent;
        cursor: pointer; padding: 10px; flex-direction: column; justify-content: space-between; }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink-pine);
        border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* ===== Tablet ===== */
  @media (max-width: 1080px) {
    .g-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ===== Phone ===== */
  @media (max-width: 999px) {
    .util .container { height: 36px; gap: 14px; }
    .util a { font-size: 11.5px; }
    header.site .container { height: 64px; }
    .brand img { height: 34px; }
    .wordmark .en { font-size: 15px; }
    .nav-toggle { display: flex; }
    nav.main { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
        align-items: stretch; gap: 0; background: rgba(255,255,255,.98);
        backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-cool);
        max-height: 0; overflow: hidden; padding: 0; box-shadow: var(--shadow-deep);
        transition: max-height var(--dur) var(--ease); }
    nav.main.open { max-height: 76vh; }
    nav.main a { padding: 15px 24px; font-size: 16px; border-top: 1px solid var(--border-cool); }
    nav.main a::after { display: none; }
    nav.main a:first-child { border-top: 0; }
    nav.main.open { max-height: 86vh; overflow-y: auto; }
    .nav-item { display: block; width: 100%; }
    .nav-item > a { display: block; }
    .nav-item .caret { display: none; }
    .submenu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
        box-shadow: none; border: 0; border-left: 3px solid var(--zju-red-soft); background: var(--off-white); }
    .submenu-inner { display: block; max-width: none; margin: 0; padding: 0; }
    .sm-intro { display: none; }
    .sm-links { display: block; padding-left: 0; border-left: 0; }
    .submenu .sm-links a { justify-content: space-between; padding: 13px 24px 13px 42px; font-size: 15px;
        border-top: 1px solid var(--border-cool); color: var(--fg-2); }
    .submenu .sm-links a i { display: none; }
    .hero { height: 440px; }
    .hero .scrim { background: linear-gradient(0deg, rgba(20,18,14,.82) 0%, rgba(20,18,14,.2) 55%, rgba(20,18,14,.35) 100%); }
    .hero .caps { max-width: 100%; }
    .hero h1 { font-size: 27px; }
    .hero .zh { font-size: 14.5px; }
    .hero p { font-size: 14px; max-width: 100%; }
    section.band { padding: 54px 0; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
    .sec-head h2, .ev-head h2 { font-size: 27px; }
    .g-grid { grid-template-columns: 1fr; gap: 18px; }
    .disc-grid { grid-template-columns: 1fr; }
    .hl-col { grid-template-columns: 1fr; }
    .feat { grid-template-columns: 1fr; }
    .feat .ph { min-height: 200px; }
    .feat .fb { padding: 26px 24px 28px; }
    .feat h3 { font-size: 24px; }
    .ev-scroll .ev-card { flex: 0 0 80vw; }
    .ev-head-ctrl .ev-nav { display: none; }
    .arch-head { padding: 28px 24px 18px; }
    .arch-list { padding: 4px 24px 30px; }
    .arch-item { grid-template-columns: 1fr; gap: 6px; }
    .arch-item .a-date { display: flex; gap: 10px; align-items: baseline; }
    .arch-item .a-date span { margin-top: 0; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .stat-row .stat { padding: 22px 16px 0 0; }
    .stat-row .stat:nth-child(3), .stat-row .stat:nth-child(4) { border-top: 1px solid var(--border-cool); padding-top: 22px; }
    .stat-row .stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .stat-row .num { font-size: 31px; }
    .res-cols { grid-template-columns: 1fr; gap: 30px; }
    .about-grid { gap: 28px; }
    .about-text h2 { font-size: 30px; }
    .about-copy p { font-size: 15.5px; }
    .museum-grid .img { min-height: 260px; }
    .museum-grid .panel { padding: 40px 24px; }
    .admissions .container { gap: 26px; }
    .adm-grid { grid-template-columns: 1fr; margin-top: 36px; }
    .adm-card { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 26px 4px 24px; }
    .adm-card:first-child { border-top: 0; }
    .adm-card .adm-arr { margin-top: 18px; }
    .f-top { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-bottom: 32px; }
    .f-brand { grid-column: 1 / -1; }
    .f-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
    footer.site .container { padding-top: 48px; }
  }

  @media (max-width: 440px) {
    nav.main, .util a:first-child { font-size: 15px; }
    .f-top { grid-template-columns: 1fr; }
    .hero h1 { font-size: 24px; }
  }

  /* ===== Scroll-motion system ===== */
  header.site { transition: box-shadow .35s var(--ease), background .35s var(--ease); }
  header.site.scrolled { box-shadow: 0 8px 30px rgba(30,26,20,.10); }
  .hero .caps { will-change: transform, opacity; }
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.reveal-fallback) .sec-head,
    html.js:not(.reveal-fallback) .about-text,
    html.js:not(.reveal-fallback) .about-copy,
    html.js:not(.reveal-fallback) .res-intro,
    html.js:not(.reveal-fallback) .feat,
    html.js:not(.reveal-fallback) .museum-grid > *,
    html.js:not(.reveal-fallback) .stat-row > .stat,
    html.js:not(.reveal-fallback) .disc-grid > .disc,
    html.js:not(.reveal-fallback) .g-grid > .g-card,
    html.js:not(.reveal-fallback) .res-cols > .res-group,
    html.js:not(.reveal-fallback) .hl-col .sm-card,
    html.js:not(.reveal-fallback) .news-list > .news-item,
    html.js:not(.reveal-fallback) .ev-scroll > .ev-card,
    html.js:not(.reveal-fallback) .visit-grid > *,
    html.js:not(.reveal-fallback) .reveal {
      opacity: 0; transform: translateY(26px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    html.js .is-in { opacity: 1 !important; transform: none !important; }
  }

  /* ===== Visit & Contact ===== */
  section.band.visit { padding: 46px 0; }
  .visit { background: var(--paper-silk); }
  .visit .sec-head { margin-bottom: 4px; }
  .visit .sec-head h2 { font-size: 22px; }
  .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 800px; margin: 16px auto 0; }
  .visit-card { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
  .vmap { width: 150px; height: auto; display: block; border: 1px solid var(--border-cool); }
  .vc-body h3 { font-family: var(--font-cond); font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--ink-pine); }
  .vc-body .vc-zh { font-family: var(--font-sans-cn); font-size: 11.5px; color: var(--fg-3); margin: 3px 0 9px; }
  .vc-addr { font-size: 12.5px; line-height: 1.5; color: var(--fg-2); margin: 0 0 7px; }
  .vc-meta { font-size: 12px; line-height: 1.55; color: var(--fg-3); margin: 0; }
  .vc-meta a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--border-cool); transition: color .18s var(--ease), border-color .18s var(--ease); }
  .vc-meta a:hover { color: var(--zju-red); border-color: var(--zju-red); }
  @media (max-width: 999px) { .visit-grid { grid-template-columns: 1fr; gap: 26px; max-width: 420px; } }


  @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

  /* ===== Page hero — full-bleed image banner ===== */
  .page-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden;
    background: linear-gradient(135deg, var(--ink-pine) 0%, #2c2620 55%, var(--zju-red-deep) 100%); }
  .page-hero .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
  .page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,16,12,.22) 0%, rgba(20,16,12,.44) 50%, rgba(20,16,12,.85) 100%); }
  .page-hero .ph-inner { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 54px; }
  .page-hero .ph-eyebrow { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: #E7C7A1; }
  .page-hero h1 { font-family: var(--font-banner); font-weight: 600; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.04; color: #fff; margin: 14px 0 0; text-shadow: 0 1px 30px rgba(0,0,0,.3); }
  .page-hero .ph-zh { font-family: var(--font-sans-cn); font-size: 15.5px; color: rgba(255,255,255,.82); margin-top: 10px; }
  .page-hero .ph-lede { font-size: var(--fs-lede); line-height: 1.62; color: rgba(255,255,255,.92); margin-top: 18px; max-width: 60ch; }
  @media (max-width: 999px) { .page-hero { min-height: 380px; } .page-hero .ph-inner { padding-top: 60px; padding-bottom: 40px; } }
  .page-main { padding: var(--sp-8) 0; }
  .page-main .placeholder { border: 1px dashed var(--border-cool); padding: 64px 40px; text-align: center; color: var(--fg-3); }
  .page-main .placeholder code { font-family: monospace; background: var(--paper-rice); padding: 1px 6px; }
  .page-main .ph-hint { font-size: 13px; margin-top: 12px; max-width: 60ch; margin-left: auto; margin-right: auto; }

  /* ===== UNESCO Chair page components ===== */
  .prose { max-width: 66ch; }
  .prose p { font-size: 16.5px; line-height: 1.75; color: var(--fg-2); margin: 0 0 16px; }
  .prose p:last-child { margin-bottom: 0; }
  .area-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border-cool); border: 1px solid var(--border-cool); margin-top: 44px; }
  .area { background: var(--white); padding: 30px 30px; }
  .area .area-n { font-family: var(--font-cond); font-weight: 700; color: var(--zju-red); font-size: 13px; letter-spacing: .1em; }
  .area h3 { font-family: var(--font-cond); font-weight: 700; font-size: 18px; color: var(--ink-pine); margin: 12px 0 0; line-height: 1.3; }
  .people-group { margin-top: 40px; }
  .people-head { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--zju-red); padding-bottom: 10px; border-bottom: 1px solid var(--border-cool); margin-bottom: 22px; }
  .people-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px 32px; }
  .person .p-name { font-family: var(--font-cond); font-weight: 700; font-size: 16px; color: var(--ink-pine); }
  .person .p-role { font-size: 13px; color: var(--zju-red); margin-top: 2px; }
  .person .p-int { font-size: 13px; line-height: 1.55; color: var(--fg-3); margin-top: 6px; }
  .hl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
  .hl-card { background: var(--white); border: 1px solid var(--border-cool); padding: 30px 28px; display: flex; flex-direction: column; }
  .hl-card .hl-k { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--zju-red); }
  .hl-card h3 { font-family: var(--font-serif, Georgia, serif); font-size: 21px; line-height: 1.22; color: var(--ink-pine); margin: 12px 0 12px; }
  .hl-card p { font-size: 13.5px; line-height: 1.68; color: var(--fg-2); }
  .hl-card .hl-meta { margin-top: auto; padding-top: 16px; font-size: 12px; color: var(--fg-3); font-style: italic; }
  .plat { padding: 38px 0; border-top: 1px solid var(--border-cool); display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.45fr); gap: 44px; }
  .plat:first-of-type { border-top: 0; padding-top: 44px; }
  .plat .plat-k { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--zju-red); }
  .plat .plat-lhs h3 { font-family: var(--font-cond); font-weight: 700; font-size: 22px; color: var(--ink-pine); margin: 10px 0 0; line-height: 1.18; }
  .plat .plat-lhs .plat-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 10px; line-height: 1.5; }
  .plat .plat-body p { font-size: 14.5px; line-height: 1.7; color: var(--fg-2); margin: 0 0 12px; }
  .timeline { list-style: none; margin: 14px 0 0; padding: 0; }
  .timeline li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--border-cool); font-size: 13px; }
  .timeline li .ty { font-family: var(--font-cond); font-weight: 700; color: var(--zju-red); }
  .timeline li .tt { color: var(--fg-3); }
  .timeline li .tp { color: var(--ink-pine); font-weight: 600; }
  .partner-block h4 { font-family: var(--font-cond); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); margin: 16px 0 8px; }
  .partner-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; font-size: 13px; }
  .partner-list li { break-inside: avoid; padding: 4px 0; color: var(--fg-2); }
  .support-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 40px; }
  .support-cols h3 { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; color: var(--zju-red); margin: 0 0 14px; }
  .support-cols ul { list-style: none; margin: 0; padding: 0; }
  .support-cols li { padding: 8px 0; border-bottom: 1px solid var(--border-cool); font-size: 14.5px; color: var(--fg-2); }
  .contact-card { margin-top: 36px; display: grid; grid-template-columns: repeat(2,1fr); gap: 24px 44px; max-width: 780px; }
  .contact-card .ci-k { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--zju-red); }
  .contact-card .ci-v { font-size: 15px; color: var(--ink-pine); margin-top: 6px; line-height: 1.55; }
  .contact-card .ci-v a { color: var(--ink-pine); text-decoration: none; border-bottom: 1px solid var(--zju-red-soft); }
  @media (max-width: 880px) {
    .area-grid, .hl-grid, .support-cols, .contact-card { grid-template-columns: 1fr; }
    .people-grid { grid-template-columns: 1fr 1fr; }
    .plat { grid-template-columns: 1fr; gap: 16px; }
    .partner-list { columns: 1; }
  }
  @media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; } }
  .hl-card .hl-img { display: block; width: calc(100% + 56px); height: 178px; object-fit: cover; margin: -30px -28px 20px; background: var(--paper-rice); max-width:unset;}
  .plat-lhs .plat-img { display: block; width: 100%; height: 172px; object-fit: cover; margin-top: 20px; border: 1px solid var(--border-cool); }
  .plat-lhs .plat-img[src=""] {display: none;}
  @media (max-width: 880px) { .plat-lhs .plat-img { max-width: 420px; } }

  /* ===== About mark ===== */
  .sec-head .about-mark { width: 132px; height: auto; align-self: flex-end; margin-left: 28px; flex: 0 0 auto; }
  #about .stat-row { margin-top: 80px; }
  @media (max-width: 999px) {
.ab-main{    padding-left: var(--sp-5); padding-right: var(--sp-5);}
  }
  @media (max-width: 999px) {
    .sec-head .about-mark { width: 104px; align-self: flex-start; margin: 8px 0 0; }
    #about .stat-row { margin-top: 48px; }
  }

  /* ===== Research Centre area ===== */
  .area-head { margin: 44px 0 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .area-head .area-kicker { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--zju-red); }
  .area-head .area-kicker-zh { font-family: var(--font-sans-cn); font-size: 13px; color: var(--fg-3); }
  .area-head + .area-grid { margin-top: 0; }

  /* ===== Chair card ===== */
  .chair-card { display: grid; grid-template-columns: 124px 1fr; gap: 26px; align-items: center; }
  .chair-card .chair-photo { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 1px solid var(--border-cool); }
  .chair-card .chair-info .p-name { font-size: 19px; }
  .chair-card .chair-info .p-role { margin-top: 4px; }
  .chair-card .chair-info .p-int { max-width: 60ch; }
  @media (max-width: 560px) { .chair-card { grid-template-columns: 92px 1fr; gap: 18px; align-items: flex-start; } .chair-card .chair-photo { width: 92px; height: 92px; } }

  /* ===== Alliance map ===== */
  .acch-map-wrap { grid-column: 1 / -1; margin: 10px 0 0; }
  .acch-map { --gold: #E7C7A1; position: relative; overflow: hidden; background: #14100c; box-shadow: 0 22px 56px rgba(30,26,20,.20); }
  .acch-svg { display: block; width: 100%; height: auto; }
  .acch-svg .land { fill: #37302a; stroke: #4a4239; stroke-width: .4; }
  .acch-svg .arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.1; opacity: .55; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .acch-svg .arc-flow { fill: none; stroke: #fff; stroke-width: 1.3; opacity: 0; stroke-linecap: round; stroke-dasharray: .055 .945; }
  .acch-svg .node .dot { fill: var(--gold); }
  .acch-svg .node--cn .dot { fill: #CDA869; }
  .acch-svg .node--cn .ring, .acch-svg .node--os .ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .45; }
  .acch-svg .node--hub .dot { fill: #fff; stroke: var(--zju-red-soft); stroke-width: 2.4; }
  .acch-svg .node--hub .ring { fill: none; stroke: var(--zju-red-soft); stroke-width: 1.6; }
  .acch-legend { position: absolute; left: 22px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
  .acch-legend .big { font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .03em; color: #efe7da; }
  .acch-legend .big b { color: var(--gold); }
  .acch-legend .keys { display: flex; gap: 16px; font-family: var(--font-cond); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #cdc3b4; }
  .acch-legend .k { display: inline-flex; align-items: center; gap: 7px; }
  .acch-legend .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .acch-legend .sw-hub { background: #fff; box-shadow: 0 0 0 2px var(--zju-red-soft); }
  .acch-legend .sw-os { background: var(--gold); }
  .acch-cap { margin-top: 12px; font-family: var(--font-cond); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
  .acch-map .acch-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: #1b1611; color: #f3ece0; border: 1px solid rgba(231,199,161,.4); padding: 6px 11px; border-radius: 4px; font-family: var(--font-cond); font-weight: 500; font-size: 12px; letter-spacing: .02em; white-space: nowrap; max-width: 260px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 5; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
  .acch-map .acch-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1b1611; }
  .acch-map .acch-tip.show { opacity: 1; }
  .acch-svg .node { cursor: pointer; }
  .acch-svg .node .hit { fill: transparent; }
  .acch-svg .node .dot { transition: transform .15s ease, fill .15s ease; }
  .acch-svg .node.hot .dot, .acch-svg .node:hover .dot { transform: scale(1.8); transform-box: fill-box; transform-origin: center; }
  .acch-svg .node--os.hot .dot, .acch-svg .node--os:hover .dot, .acch-svg .node--cn.hot .dot, .acch-svg .node--cn:hover .dot { fill: #fff; }
  @media (max-width: 640px) {
    .acch-map { background: #14100c; }
    .acch-legend { position: static; left: auto; bottom: auto; padding: 13px 16px 15px; gap: 7px; background: #14100c; }
    .acch-legend .big { font-size: 13px; }
    .acch-legend .keys { font-size: 10px; gap: 14px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.reveal-fallback) .acch-map .arc { stroke-dashoffset: 1; }
    html.js .acch-map.is-in .arc { animation: acchDraw 1.5s ease forwards; animation-delay: var(--d); }
    html.js .acch-map.is-in .arc-flow { animation: acchFlow 2.8s linear infinite; animation-delay: calc(var(--d) + 1.4s); }
    html.js:not(.reveal-fallback) .acch-map .node { opacity: 0; }
    html.js .acch-map.is-in .node { animation: acchNode .5s ease forwards; animation-delay: var(--d); }
    html.js .acch-map.is-in .node--hub .ring { transform-box: fill-box; transform-origin: center; }
    html.js .acch-map.is-in .node--hub .r1 { animation: acchPulse 2.8s ease-out infinite; }
    html.js .acch-map.is-in .node--hub .r2 { animation: acchPulse 2.8s ease-out infinite 1.4s; }
    @keyframes acchDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes acchFlow { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: .85; } 88% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @keyframes acchNode { from { opacity: 0; } to { opacity: 1; } }
    @keyframes acchPulse { 0% { opacity: .7; transform: scale(.5); } 70% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
  }

  /* ===== Support + Contact ===== */
  #support { padding-bottom: 44px; }
  #contact { padding-top: 46px; padding-bottom: 72px; }
  #support .sec-head, #contact .sec-head { margin-bottom: 24px; }
  #support .support-cols { margin-top: 24px; }
  #contact .contact-card { margin-top: 24px; }
  @media (max-width: 999px) {
    #support { padding-bottom: 34px; }
    #contact { padding-top: 34px; padding-bottom: 48px; }
  }

/* ===== SECTION PAGE · 顶部分节导航 ===== */
.sec-wrap{max-width:1080px;margin:0 auto;padding:34px 28px 92px;}
.sec-masthead{padding-bottom:18px;border-bottom:1.5px solid var(--ink-pine);}
.mh-eyebrow{display:block;font:700 12px/1 var(--font-cond);letter-spacing:.22em;text-transform:uppercase;color:var(--zju-red);margin-bottom:11px;}
.mh-title{display:block;}
.mh-title .art-title{font-family:var(--font-cond);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.02;margin:0;color:var(--ink-pine);}
.mh-zh{display:block;font-family:var(--font-serif-cn);font-size:14px;color:var(--fg-3);margin-top:8px;letter-spacing:.04em;}
.sec-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 28px;margin:0 0 34px;}
.sec-tabs a{display:inline-flex;align-items:baseline;gap:9px;padding:15px 0;text-decoration:none;color:var(--fg-2);font-family:var(--font-cond);font-weight:500;font-size:15.5px;letter-spacing:.005em;border-bottom:2px solid var(--border-cool);white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease);}
.sec-tabs a .n{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--grey-40);}
.sec-tabs a:hover{color:var(--zju-red);}
.sec-tabs a.on{color:var(--ink-pine);font-weight:700;border-bottom-color:var(--zju-red);}
.sec-tabs a.on .n{color:var(--zju-red);}
.sec-body{min-height:340px;}
.sec-panel{display:none;}
.sec-panel.on{display:block;animation:secIn .3s var(--ease);}
@keyframes secIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.sec-panel.article-body{margin-top:0;max-width:68ch;}
.sec-panel.article-body h2{margin-top:0;}
.panel-h2{font-family:var(--font-cond);font-weight:700;font-size:23px;color:var(--fg-1);margin:0 0 .7em;}
.panel-note{font-size:13px;color:var(--fg-3);margin:-4px 0 18px;}
.panel-sub{font-size:13.5px;color:var(--fg-3);margin-top:20px;max-width:68ch;}
.panel-list-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.panel-all{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--zju-red);text-decoration:none;}
.panel-all:hover{text-decoration:underline;}
.panel-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.panel-num{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--zju-red);}
.panel-hd .panel-h2{margin:0;}
.stat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:18px;}
.stat2{display:flex;flex-direction:column;gap:2px;padding:22px 0;border-bottom:1px solid var(--border-cool);}
.stat2 .big{font-family:var(--font-cond);font-weight:700;font-size:clamp(40px,4.4vw,56px);line-height:.92;color:var(--ink-pine);letter-spacing:-.012em;font-variant-numeric:tabular-nums;}
.stat2 .big .suf{color:var(--zju-red);margin-left:1px;}
.stat2 .lab{font-size:13px;color:var(--fg-3);letter-spacing:.015em;margin-top:8px;}
@media(max-width:820px){
  .sec-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0 22px;}
  .sec-tabs a .n{display:none;}
  .stat-list{grid-template-columns:repeat(2,1fr);gap:0 32px;}
}
@media(max-width:560px){.stat-list{grid-template-columns:1fr;gap:0;}}

/* ===== ARTICLE-DENSITY-PATCH ===== */
.article-body figure img{max-width:640px;}
.article-body figcaption{max-width:640px;margin-left:auto;margin-right:auto;}

.sibi_art{display:none;}