/* ===== RESET & BASE ===== */
			*,
			*::before,
			*::after {
				box-sizing: border-box;
				margin: 0;
				padding: 0
			}

			:root {
				--bg: oklch(99% 0.002 240);
				--surface: oklch(100% 0 0);
				--fg: oklch(18% 0.018 250);
				--fg-soft: oklch(32% 0.015 250);
				--muted: oklch(48% 0.015 250);
				--border: oklch(91% 0.006 250);
				--accent: oklch(48% 0.16 265);
				--accent-2: oklch(55% 0.12 265);
				--accent-light: oklch(88% 0.06 265);
				--nav-dark: oklch(35% 0.035 260);
				--nav-light: oklch(50% 0.07 265);
				--radius: 16px;
				--radius-sm: 8px;
				--max-w: 1380px;
				--nav-h: 120px;
				--font-display: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
				--font-body: 'SF Pro Text', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
			}

			html {
				scroll-behavior: smooth;
				scroll-padding-top: var(--nav-h)
			}

			body {
				font-family: var(--font-body);
				font-size: 17px;
				line-height: 1.65;
				color: var(--fg);
				background: var(--bg);
				-webkit-font-smoothing: antialiased
			}

			a {
				color: var(--accent);
				text-decoration: none;
				transition: opacity .25s
			}

			a:hover {
				opacity: .75
			}

			img {
				max-width: 100%;
				height: auto;
				display: block
			}

			.container {
				max-width: var(--max-w);
				margin: 0 auto;
				padding: 0 32px
			}

			.section-label {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				font-size: .7rem;
				font-weight: 600;
				letter-spacing: .12em;
				text-transform: uppercase;
				color: var(--accent);
				margin-bottom: 14px
			}

			.section-label::before {
				content: '';
				width: 28px;
				height: 2px;
				background: var(--accent);
				border-radius: 1px
			}

			.section-title {
				font-family: var(--font-display);
				font-size: clamp(1.8rem, 3.8vw, 3rem);
				font-weight: 800;
				letter-spacing: -.03em;
				line-height: 1.08;
				margin-bottom: 16px
			}

			section {
				padding: 112px 0
			}

			.card {
				background: var(--surface);
				border: 1px solid var(--border);
				border-radius: var(--radius);
				transition: box-shadow .35s, transform .35s
			}

			.card:hover {
				box-shadow: 0 8px 30px oklch(0% 0 0 / 0.07);
				transform: translateY(-3px)
			}

			/* ===== BACK TO TOP ===== */
			#backToTop {
				position: fixed;
				bottom: 32px;
				right: 32px;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: var(--accent);
				color: #fff;
				border: none;
				cursor: pointer;
				display: grid;
				place-items: center;
				box-shadow: 0 4px 16px oklch(0% 0 0 / 0.15);
				opacity: 0;
				visibility: hidden;
				transform: translateY(12px);
				transition: opacity .3s, visibility .3s, transform .3s, background .2s;
				z-index: 999
			}

			#backToTop.visible {
				opacity: 1;
				visibility: visible;
				transform: translateY(0)
			}

			#backToTop:hover {
				background: oklch(42% 0.20 265)
			}

			#backToTop svg {
				width: 20px;
				height: 20px;
				fill: none;
				stroke: #fff;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

			/* ===== NAVIGATION — Two-row transparent / solid on scroll */
			#mainNav {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background: transparent;
				z-index: 1000;
				transition: background .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s cubic-bezier(.4, 0, .2, 1)
			}

			#mainNav.scrolled {
				background: var(--accent);
				box-shadow: 0 1px 0 oklch(0% 0 0 / .15), 0 8px 32px oklch(0% 0 0 / .12)
			}

			/* Row 1: logo / nav-links / search / language — single row */
			.nav-row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0;
				width: 100%;
				background: transparent;
				transition: padding .35s ease
			}

			#mainNav.scrolled .nav-row1 {
				padding: 6px 0
			}

			.nav-row1 .nav-inner {
				max-width: var(--max-w);
				margin: 0 auto;
				padding: 0 28px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0
			}

			.nav-brand {
				display: flex;
				align-items: center;
				order: 1;
				flex-shrink: 0
			}

			.nav-brand img {
				height: 72px;
				width: auto;
				display: block;
				border-radius: 6px;
				transition: height .35s ease
			}

			#mainNav.scrolled .nav-brand img {
				height: 52px
			}

			.nav-row1 .nav-links {
				order: 2;
				flex: 1;
				justify-content: center
			}

			.nav-row1-right {
				display: flex;
				align-items: center;
				gap: 16px;
				order: 3;
				flex-shrink: 0
			}

			/* Search box — icon button + dropdown search bar */
			.nav-search {
				position: relative;
				display: flex;
				align-items: center
			}

			.nav-search-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36px;
				height: 36px;
				padding: 0;
				border: none;
				background: transparent;
				cursor: pointer;
				border-radius: 8px;
				transition: background .25s
			}

			.nav-search-btn:hover {
				background: rgba(255, 255, 255, .15)
			}

			.nav-search .search-icon {
				width: 20px;
				height: 20px;
				stroke: #fff
			}

			/* 搜索栏：点击导航搜索图标后，出现在搜索按钮正下方（约 400px 宽、右对齐） */
			.nav-searchbar {
				position: absolute;
				top: calc(100% + 12px);
				right: 0;
				width: 400px;
				max-width: calc(100vw - 40px);
				background: var(--accent);
				border-radius: 10px;
				box-shadow: 0 14px 30px oklch(0% 0 0 / .2);
				opacity: 0;
				visibility: hidden;
				transform: translateY(-8px);
				transition: opacity .28s ease, transform .28s ease, visibility .28s;
				z-index: 999
			}

			.nav-searchbar.open {
				opacity: 1;
				visibility: visible;
				transform: translateY(0)
			}

			.nav-searchbar-inner {
				padding: 10px 48px 10px 14px;
				display: flex;
				align-items: center;
				gap: 10px
			}

			.nav-searchbar-icon {
				width: 20px;
				height: 20px;
				flex-shrink: 0;
				color: rgba(255, 255, 255, .7)
			}

			.nav-searchbar input {
				flex: 1;
				min-width: 0;
				padding: 10px 14px;
				border: none;
				outline: none;
				border-radius: 8px;
				background: rgba(255, 255, 255, .15);
				color: #fff;
				font-size: .95rem;
				font-family: var(--font-body)
			}

			.nav-searchbar input::placeholder {
				color: rgba(255, 255, 255, .5)
			}

			/* 关闭按钮：悬浮在搜索层右上角 */
			.nav-searchbar-close {
				position: absolute;
				top: 7px;
				right: 7px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 28px;
				height: 28px;
				padding: 0;
				border: none;
				border-radius: 50%;
				background: rgba(255, 255, 255, .12);
				color: #fff;
				cursor: pointer;
				transition: background .25s
			}

			.nav-searchbar-close:hover {
				background: rgba(255, 255, 255, .3)
			}

			.nav-searchbar-close svg {
				width: 14px;
				height: 14px
			}

			/* 搜索按钮：输入框右侧 */
			.nav-searchbar-submit {
				flex-shrink: 0;
				padding: 10px 18px;
				border: none;
				border-radius: 8px;
				background: #fff;
				color: var(--accent);
				font-size: .9rem;
				font-weight: 600;
				font-family: var(--font-body);
				cursor: pointer;
				transition: opacity .25s
			}

			.nav-searchbar-submit:hover {
				opacity: .85
			}

			/* Language switcher */
			.nav-lang {
				display: flex;
				align-items: center;
				gap: 2px;
				background: rgba(255, 255, 255, .15);
				border-radius: 6px;
				overflow: hidden
			}

			.nav-lang a {
				display: block;
				padding: 6px 14px;
				border: none;
				cursor: pointer;
				font-size: .78rem;
				font-weight: 600;
				letter-spacing: .04em;
				background: transparent;
				color: rgba(255, 255, 255, .7);
				text-decoration: none;
				transition: all .25s;
				font-family: var(--font-body)
			}

			.nav-lang a.active {
				background: rgba(255, 255, 255, .25);
				color: #fff
			}

			.nav-lang a:hover {
				color: #fff
			}

			/* Navigation links */
			.nav-links {
				display: flex;
				align-items: center;
				gap: 0;
				list-style: none
			}

			.nav-links>li {
				position: relative
			}

			.nav-links>li>a {
				padding: 12px 20px;
				border-radius: 8px;
				font-size: 1.08rem;
				font-weight: 600;
				color: rgba(255, 255, 255, .9);
				transition: color .4s cubic-bezier(.4, 0, .2, 1), transform .3s;
				display: flex;
				align-items: center;
				gap: 6px;
				white-space: nowrap;
				position: relative
			}

			#mainNav.scrolled .nav-links>li>a {
				color: rgba(255, 255, 255, .85)
			}

			#mainNav.scrolled .nav-links>li>a:hover {
				color: #fff
			}

			.nav-links>li>a::after {
				content: '';
				position: absolute;
				bottom: 4px;
				left: 20px;
				right: 20px;
				height: 2px;
				background: #fff;
				border-radius: 1px;
				transform: scaleX(0);
				transform-origin: left center;
				transition: transform .35s cubic-bezier(.22, 1, .36, 1)
			}

			.nav-links>li>a:hover {
				color: #fff;
				background: transparent;
				transform: translateY(-1px)
			}

			.nav-links>li>a:hover::after {
				transform: scaleX(1)
			}

			#mainNav.scrolled .nav-links>li>a:hover::after {
				background: #fff
			}

			#mainNav.scrolled .nav-links>li>a::after {
				background: #fff
			}

			.nav-links>li>a .arrow {
				font-size: .6rem;
				transition: transform .3s cubic-bezier(.22, 1, .36, 1)
			}

			.nav-links>li:hover>a .arrow {
				transform: rotate(180deg)
			}

			/* Dropdown menus */
			.dropdown {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%) translateY(8px);
				min-width: 200px;
				background: var(--surface);
				border: 1px solid var(--border);
				border-radius: var(--radius-sm);
				box-shadow: 0 12px 32px oklch(0% 0 0 / 0.1);
				padding: 6px 0;
				opacity: 0;
				visibility: hidden;
				transition: all .25s;
				pointer-events: none;
				z-index: 100
			}

			.nav-links>li:hover .dropdown,
			.nav-links>li:focus-within .dropdown {
				opacity: 1;
				visibility: visible;
				transform: translateX(-50%) translateY(0);
				pointer-events: auto
			}

			.dropdown a {
				display: block;
				padding: 8px 20px;
				font-size: .82rem;
				font-weight: 500;
				color: var(--fg-soft);
				transition: background .15s
			}

			.dropdown a:hover {
				background: var(--accent-light);
				color: var(--accent)
			}

			.dropdown .drop-label {
				font-size: .65rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: .08em;
				color: var(--muted);
				padding: 8px 20px 4px;
				border-top: 1px solid var(--border);
				margin-top: 4px
			}

			/* Mobile #mainNav toggle */
			.nav-utils {
				display: none
			}

			/* 桌面端 panel 只是透明包裹层，ul 照常参与 .nav-inner 布局 */
			.nav-mobile-panel {
				display: contents
			}

			.nav-toggle {
				display: none;
				flex-direction: column;
				gap: 6px;
				background: none;
				border: none;
				cursor: pointer;
				padding: 4px
			}

			.nav-toggle span {
				display: block;
				width: 26px;
				height: 2.5px;
				background: #fff;
				border-radius: 2px;
				transition: all .3s
			}

			.nav-backdrop {
				display: none
			}

			/* ===== HERO BANNER — vertically centered, bg zoom, staggered news ===== */
			.hero {
				min-height: 100dvh;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				overflow: hidden;
				color: #fff
			}

			.hero-bg-canvas {
				position: absolute;
				inset: 0;
				background-size: cover;
				background-position: center;
				opacity: 0;
				transition: opacity 1.2s ease;
				z-index: 0
			}

			.hero-bg-canvas.active {
				opacity: 1
			}

			@keyframes bgZoom {
				from {
					transform: scale(1)
				}

				to {
					transform: scale(1.08)
				}
			}

			.hero-overlay {
				position: absolute;
				inset: 0;
				background: linear-gradient(135deg, rgba(11, 20, 40, .55), rgba(15, 25, 50, .40));
				z-index: 1
			}

			.hero .container {
				position: relative;
				z-index: 2;
				width: 100%
			}

			.hero-news-unboxed {
				max-width: var(--max-w);
				margin: 0 auto
			}

			/* News meta / title / body / link styles */
			.hero-news-unboxed .hn-meta {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 14px
			}

			.hero-news-unboxed .hn-meta .hn-date {
				font-size: .82rem;
				font-weight: 500;
				letter-spacing: .04em;
				color: rgba(255, 255, 255, .6)
			}

			.hero-news-unboxed .hn-meta .hn-badge {
				display: inline-block;
				padding: 3px 14px;
				border-radius: 999px;
				background: oklch(72% 0.14 265/.25);
				color: oklch(80% 0.10 265);
				font-size: .65rem;
				font-weight: 600;
				letter-spacing: .06em;
				text-transform: uppercase
			}

			.hero-news-unboxed h2 {
				font-family: var(--font-display);
				font-size: clamp(1.6rem, 3.5vw, 2.8rem);
				font-weight: 800;
				letter-spacing: -.025em;
				line-height: 1.1;
				margin-bottom: 16px
			}

			.hero-news-unboxed p {
				font-size: 1.05rem;
				line-height: 1.6;
				color: rgba(255, 255, 255, .7);
				max-width: 980px;
				margin-bottom: 24px
			}

			.hero-news-unboxed .hn-link {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				padding: 12px 30px;
				border-radius: 40px;
				font-size: .88rem;
				font-weight: 600;
				letter-spacing: .02em;
				line-height: 1.2;
				color: #fff;
				background: rgba(255, 255, 255, .12);
				border: 1px solid rgba(255, 255, 255, .25);
				text-decoration: none;
				transition: background .35s, border-color .35s, transform .35s, box-shadow .35s;
				cursor: pointer;
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden
			}

			.hero-news-unboxed .hn-link .hn-arrow {
				display: inline-flex;
				transition: transform .35s cubic-bezier(.22, 1, .36, 1)
			}

			.hero-news-unboxed .hn-link:hover {
				background: rgba(255, 255, 255, .22);
				border-color: rgba(255, 255, 255, .45);
				transform: translateY(-2px);
				box-shadow: 0 8px 28px rgba(255, 255, 255, .12)
			}

			.hero-news-unboxed .hn-link:hover .hn-arrow {
				transform: translateX(4px)
			}

			.hero-news-unboxed .hn-link:active {
				transform: scale(.94)
			}

			/* News controls (dots + arrows) */
			.hero-news-unboxed .hn-ctrls {
				display: flex;
				align-items: center;
				gap: 16px;
				margin-top: 36px
			}

			.hero-news-unboxed .hn-ctrls .hn-dots {
				display: flex;
				gap: 6px
			}

			.hero-news-unboxed .hn-ctrls .hn-dots button {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				border: 1px solid rgba(255, 255, 255, .3);
				background: transparent;
				cursor: pointer;
				transition: all .3s;
				padding: 0
			}

			.hero-news-unboxed .hn-ctrls .hn-dots li.slick-active button {
				background: oklch(72% 0.14 265);
				border-color: oklch(72% 0.14 265);
				width: 28px;
				border-radius: 4px
			}

			.hero-news-unboxed .hn-ctrls .hn-navbtns {
				display: flex;
				gap: 8px
			}

			.hero-news-unboxed .hn-ctrls .hn-navbtns button {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				background: rgba(255, 255, 255, .08);
				border: 1px solid rgba(255, 255, 255, .12);
				color: #fff;
				font-size: .95rem;
				cursor: pointer;
				transition: background .25s;
				display: grid;
				place-items: center
			}

			.hero-news-unboxed .hn-ctrls .hn-navbtns button:hover {
				background: rgba(255, 255, 255, .2)
			}

			/* Staggered slide-in/out animations for each news item */
			.hn-items-u {
				position: relative;
				min-height: 240px
			}

			.hn-item-u {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				opacity: 0;
				transform: translateY(36px);
				transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
				pointer-events: none;
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden
			}

			.hn-item-u.active {
				position: relative;
				opacity: 1;
				transform: translateY(0);
				pointer-events: auto
			}

			.hn-item-u.leaving {
				position: absolute;
				opacity: 0;
				transform: translateY(-28px);
				transition: opacity .5s ease, transform .5s ease
			}

			/* Child-element stagger delays when active */
			.hn-item-u.active .hn-meta {
				opacity: 1;
				transform: translateY(0)
			}

			.hn-item-u.active h2 {
				opacity: 1;
				transform: translateY(0);
				transition-delay: .1s
			}

			.hn-item-u.active p {
				opacity: 1;
				transform: translateY(0);
				transition-delay: .2s
			}

			.hn-item-u.active .hn-link {
				opacity: 1;
				transform: translateY(0);
				transition-delay: .3s
			}

			/* Hidden states before activation */
			.hn-item-u .hn-meta {
				opacity: 0;
				transform: translateY(16px);
				transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
			}

			.hn-item-u h2 {
				opacity: 0;
				transform: translateY(20px);
				transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1)
			}

			.hn-item-u p {
				opacity: 0;
				transform: translateY(18px);
				transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
			}

			.hn-item-u .hn-link {
				opacity: 0;
				transform: translateY(14px);
				transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
			}

			/* ===== NEWS & ANNOUNCEMENTS SECTION 三栏布局 ===== */
			.news-first {
				background: var(--surface);
				padding: 90px 0 80px;
				border-bottom: 1px solid var(--border)
			}

			.news-section-header {
				display: flex;
				align-items: flex-end;
				margin-bottom: 44px;
				gap: 0;
				border-bottom: 1px solid var(--border);
				padding-bottom: 0;
				position: relative
			}

			.news-icon {
				width: 32px;
				height: 32px;
				margin-right: 12px;
				stroke: var(--accent);
				fill: none;
				stroke-width: 1.8;
				stroke-linecap: round;
				stroke-linejoin: round;
				flex-shrink: 0;
				margin-bottom: 14px
			}

			.news-tabs {
				display: flex;
				align-items: stretch;
				gap: 0;
				list-style: none;
				position: relative
			}

			.news-tabs li a {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 0 24px 16px;
				font-family: var(--font-display);
				font-size: 1.3rem;
				font-weight: 700;
				color: var(--muted);
				text-decoration: none;
				transition: color .35s cubic-bezier(.16, 1, .3, 1), font-weight .15s;
				position: relative;
				white-space: nowrap
			}

			.news-tabs li a svg {
				width: 20px;
				height: 20px;
				stroke: currentColor;
				fill: none;
				stroke-width: 1.8;
				stroke-linecap: round;
				stroke-linejoin: round;
				transition: stroke .35s, transform .35s cubic-bezier(.16, 1, .3, 1)
			}

			.news-tabs li a:hover {
				color: var(--fg)
			}

			.news-tabs li a:hover svg {
				transform: translateY(-1px)
			}

			.news-tabs li a.active {
				color: var(--fg);
				font-weight: 800
			}

			.news-tabs li a.active svg {
				stroke: var(--accent)
			}

			#newsTabIndicator {
				position: absolute;
				bottom: 0;
				height: 3px;
				background: var(--accent);
				border-radius: 3px 3px 0 0;
				transition: left .4s cubic-bezier(.16, 1, .3, 1), width .4s cubic-bezier(.16, 1, .3, 1)
			}

			.news-header-spacer {
				flex: 1
			}

			.news-more-link {
				font-size: .94rem;
				font-weight: 600;
				color: var(--accent);
				display: inline-flex;
				align-items: center;
				gap: 6px;
				text-decoration: none;
				border-bottom: 1.5px solid var(--accent);
				padding-bottom: 3px;
				transition: gap .25s
			}

			.news-more-link:hover {
				gap: 10px
			}

			.news-more-link-mob {
				display: none
			}

			.news-2col-grid {
				display: grid;
				grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
				gap: 28px;
				align-items: stretch
			}

			.news-thumb-list {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between
			}

			.news-main-card {
				background: #fff;
				border: 1px solid var(--border);
				border-radius: var(--radius);
				overflow: hidden;
				display: flex;
				flex-direction: column;
				transition: box-shadow .35s, transform .35s;
				position: relative
			}

			.news-main-card:hover {
				box-shadow: 0 10px 36px oklch(0% 0 0 / 0.09);
				transform: translateY(-3px)
			}

			.news-main-stack {
				position: relative
			}

			.news-main-card:not(.active) {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				opacity: 0;
				pointer-events: none;
				visibility: hidden;
				z-index: 0
			}

			.news-main-card.active {
				opacity: 1;
				visibility: visible;
				z-index: 1
			}

			.nmc-image-wrap {
				width: 100%;
				height: 300px;
				overflow: hidden;
				position: relative
			}

			.nmc-image-wrap img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .55s ease;
				position: absolute;
				inset: 0
			}

			.news-main-card:hover .nmc-image-wrap img {
				transform: scale(1.05)
			}

			.nmc-image-wrap a {
				display: block;
				width: 100%;
				height: 100%;
				position: relative
			}

			.nmc-body {
				padding: 28px 28px 56px;
				flex: 1;
				display: flex;
				flex-direction: column;
				position: relative
			}

			.nmc-meta {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 14px
			}

			.nmc-tag {
				font-size: .72rem;
				font-weight: 700;
				letter-spacing: .04em;
				text-transform: uppercase;
				color: var(--accent)
			}

			.nmc-date {
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: .78rem;
				color: var(--muted);
				font-weight: 500
			}

			.nmc-date svg {
				width: 14px;
				height: 14px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

			.nmc-title {
				font-family: var(--font-display);
				font-size: 1.3rem;
				font-weight: 800;
				letter-spacing: -.02em;
				line-height: 1.3;
				color: var(--fg);
				margin-bottom: 12px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden
			}

			.nmc-desc {
				font-size: .9rem;
				line-height: 1.65;
				color: var(--fg-soft);
				flex: 1;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden
			}

			.nmc-controls-bar {
				position: absolute;
				bottom: 15px;
				left: 28px;
				right: 28px;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				pointer-events: auto
			}

			.nmc-dots {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-top: 0
			}

			.nmc-dots button {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				border: 2px solid var(--border);
				background: transparent;
				cursor: pointer;
				transition: all .3s;
				padding: 0;
				min-width: 12px;
				min-height: 12px
			}

			.nmc-dots li.slick-active button {
				background: var(--accent);
				border-color: var(--accent);
				width: 32px;
				border-radius: 6px
			}

			.nmc-dots button:hover {
				border-color: var(--accent)
			}

			/* prev / next buttons */
			.nmc-nav {
				display: flex;
				gap: 8px;
				flex-shrink: 0
			}

			.nmc-nav-btn {
				width: 34px;
				height: 34px;
				border-radius: 50%;
				background: #fff;
				border: 1.5px solid var(--border);
				color: var(--fg-soft);
				display: grid;
				place-items: center;
				cursor: pointer;
				transition: all .25s;
				padding: 0
			}

			.nmc-nav-btn:hover {
				border-color: var(--accent);
				color: var(--accent);
				transform: translateY(-1px)
			}

			.nmc-nav-btn:active {
				transform: scale(.94)
			}

			.nmc-nav-btn svg {
				width: 16px;
				height: 16px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

			.nmc-more {
				display: inline-flex;
				align-items: center;
				gap: 6px;
				margin-top: 14px;
				font-size: .85rem;
				font-weight: 600;
				color: var(--accent);
				text-decoration: none;
				transition: gap .25s, color .25s
			}

			.nmc-more:hover {
				gap: 10px
			}

			.nmc-more svg {
				width: 14px;
				height: 14px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

			/* ===== 右栏：纯文本新闻列表（无图片===== */
			/* .news-thumb-list rules combined above */
			.nt-item {
				display: flex;
				align-items: center;
				gap: 14px;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: var(--radius-sm);
				padding: 12px 16px 12px 18px;
				cursor: pointer;
				text-decoration: none;
				color: inherit;
				transition: border-color .25s, background .25s;
				height: 92px;
				box-sizing: border-box
			}

			.nt-item:hover {
				border-color: var(--accent);
				background: oklch(98% .005 250)
			}

			.nt-body {
				flex: 1;
				min-width: 0;
				display: flex;
				flex-direction: column;
				gap: 4px
			}

			.nt-date {
				font-size: .7rem;
				font-weight: 600;
				letter-spacing: .06em;
				color: var(--muted);
				text-transform: uppercase
			}

			.nt-title {
				font-size: .92rem;
				font-weight: 600;
				color: var(--fg);
				line-height: 1.45;
				letter-spacing: -.005em;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				transition: color .2s
			}

			.nt-item:hover .nt-title {
				color: var(--accent)
			}

			.nt-arrow {
				width: 18px;
				height: 18px;
				flex-shrink: 0;
				color: var(--muted);
				transition: color .25s, transform .25s
			}

			.nt-item:hover .nt-arrow {
				color: var(--accent);
				transform: translateX(3px)
			}

			/* ===== ANNOUNCEMENTS LIST (no images) ===== */
			.ann-list-panel {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 18px
			}

			.ann-list-item {
				display: flex;
				flex-direction: column;
				gap: 14px;
				padding: 24px;
				background: #fff;
				border-radius: var(--radius);
				cursor: pointer;
				transition: box-shadow .3s, transform .3s;
				text-decoration: none
			}

			.ann-list-item:hover {
				box-shadow: 0 6px 24px oklch(0% 0 0 / 0.08);
				transform: translateY(-2px)
			}

			.ann-list-date {
				display: flex;
				align-items: center;
				gap: 6px;
				font-size: .78rem;
				font-weight: 500;
				color: var(--muted)
			}

			.ann-list-date svg {
				width: 14px;
				height: 14px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

			.ann-list-content {
				flex: 1;
				min-width: 0
			}

			.ann-list-title {
				font-size: .9rem;
				font-weight: 700;
				color: var(--fg-soft);
				line-height: 1.5;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				transition: color .2s
			}

			.ann-list-item:hover .ann-list-title {
				color: var(--accent)
			}

			.ann-list-arrow {
				align-self: flex-end;
				width: 16px;
				height: 16px;
				stroke: var(--muted);
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
				transition: stroke .25s, transform .25s
			}

			.ann-list-item:hover .ann-list-arrow {
				stroke: var(--accent);
				transform: translateX(3px)
			}

			/* ===== ABOUT SECTION Editorial Layout ===== */
			.about {
				position: relative;
				overflow: hidden;
				padding: 0;
				background: #fafbfc
			}

			.about-bg {
				position: absolute;
				inset: -60px 0 0 0;
				background: url('../assets/2.jpg') center/cover no-repeat;
				will-change: transform;
				transform: translateZ(0);
				opacity: .07
			}

			.about-overlay {
				position: absolute;
				inset: 0;
				background: linear-gradient(180deg, rgba(250, 251, 252, .7) 0%, rgba(250, 251, 252, .92) 100%)
			}

			.about .container {
				position: relative;
				z-index: 1;
				padding: 90px 32px 80px
			}

			/* Top: large title (left) + tab #mainNav (right) */
			.about-eyebrow {
				display: flex;
				align-items: center;
				gap: 14px;
				margin-bottom: 22px
			}

			.about-eyebrow-line {
				width: 36px;
				height: 1.5px;
				background: var(--accent);
				display: inline-block;
				flex-shrink: 0
			}

			.about-eyebrow-text {
				font-size: .78rem;
				font-weight: 600;
				letter-spacing: .22em;
				text-transform: uppercase;
				color: var(--accent-2)
			}

			.about-top {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				gap: 40px;
				margin-bottom: 48px;
				flex-wrap: wrap
			}

			.about-h2 {
				font-family: var(--font-display);
				font-size: clamp(2.8rem, 6.4vw, 5.5rem);
				font-weight: 900;
				letter-spacing: -.045em;
				line-height: .95;
				color: var(--fg);
				margin: 0
			}

			.about-h2 .dot {
				color: var(--accent)
			}

			/* Main content: 2-column asymmetric grid */
			.about-grid {
				display: grid;
				grid-template-columns: .9fr 1.1fr;
				gap: 48px;
				align-items: stretch
			}

			/* Left: tall image */
			.about-image {
				position: relative;
				border-radius: 18px;
				overflow: hidden;
				min-height: 480px;
				box-shadow: 0 20px 50px -20px oklch(0% 0 0 / 0.18)
			}

			.about-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				inset: 0;
				display: block;
				transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .5s
			}

			.about-image:hover img {
				transform: scale(1.06)
			}

			.about-image::after {
				content: '';
				position: absolute;
				inset: 0;
				background: linear-gradient(180deg, transparent 50%, oklch(0% 0 0 / 0.35) 100%);
				pointer-events: none
			}

			.about-image .img-caption {
				position: absolute;
				left: 20px;
				bottom: 20px;
				right: 20px;
				color: #fff;
				font-size: .78rem;
				letter-spacing: .08em;
				text-transform: uppercase;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 8px;
				z-index: 1
			}

			.about-image .img-caption::before {
				content: '';
				width: 18px;
				height: 1px;
				background: #fff
			}

			/* Right: text content (no card flows with section background) */
			.about-info {
				display: flex;
				flex-direction: column;
				gap: 22px;
				padding: 8px 4px 0
			}

			.about-card-title {
				font-family: var(--font-display);
				font-size: clamp(1.6rem, 2.6vw, 2.2rem);
				font-weight: 800;
				color: var(--fg);
				margin: 0;
				letter-spacing: -.025em;
				line-height: 1.2
			}

			.about-info .desc {
				font-size: .98rem;
				line-height: 1.85;
				color: var(--fg-soft);
				margin: 0;
				max-width: 62ch
			}

			.about-info .desc strong {
				color: var(--accent);
				font-weight: 700
			}

			/* Large primary CTA "Learn more" */
			.about-more {
				align-self: flex-start;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				margin-top: 14px;
				padding: 16px 30px;
				font-size: 1.02rem;
				font-weight: 700;
				color: #fff;
				text-decoration: none;
				letter-spacing: .01em;
				background: var(--accent);
				border-radius: 999px;
				box-shadow: 0 6px 18px -6px oklch(60% .18 250 / .45);
				transition: gap .3s ease, transform .3s ease, box-shadow .3s ease
			}

			.about-more svg {
				transition: transform .3s ease
			}

			.about-more:hover {
				gap: 16px;
				transform: translateY(-1px);
				box-shadow: 0 10px 24px -6px oklch(60% .18 250 / .55)
			}

			/* Stats cards */
			.about-stats {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 14px;
				margin: 8px 0 4px
			}

			.stat-card {
				position: relative;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 16px;
				padding: 22px 18px 18px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 6px;
				overflow: hidden;
				transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease
			}

			.stat-card:hover {
				transform: translateY(-4px);
				border-color: var(--accent);
				box-shadow: 0 14px 32px -12px oklch(60% .18 250 / .18)
			}

			.stat-card .stat-num {
				font-family: var(--font-display);
				font-size: 1.6rem;
				font-weight: 800;
				color: var(--fg);
				letter-spacing: -.03em;
				line-height: 1
			}

			.stat-card .stat-num::after {
				content: attr(data-suffix);
				color: var(--accent)
			}

			.stat-card .stat-label {
				font-size: .68rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: .1em;
				color: var(--muted)
			}

			.stat-accent {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
				opacity: 0;
				transition: opacity .35s ease
			}

			.stat-card:hover .stat-accent {
				opacity: 1
			}

			/* Staggered reveal */
			@keyframes aboutReveal {
				from {
					opacity: 0;
					transform: translateY(28px)
				}

				to {
					opacity: 1;
					transform: translateY(0)
				}
			}

			@keyframes aboutRevealX {
				from {
					opacity: 0;
					transform: translateX(-14px)
				}

				to {
					opacity: 1;
					transform: translateX(0)
				}
			}

			.about-eyebrow {
				opacity: 0;
				animation: aboutRevealX .6s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .05s
			}

			.about-top {
				opacity: 0;
				animation: aboutReveal .7s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .1s
			}

			.about-image {
				opacity: 0;
				animation: aboutReveal .8s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .2s
			}

			.about-info {
				opacity: 0;
				animation: aboutReveal .8s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .3s
			}

			.about-stats .stat-card {
				opacity: 0;
				animation: aboutReveal .5s cubic-bezier(.16, 1, .3, 1) forwards
			}

			.about-stats .stat-card:nth-child(1) {
				animation-delay: .55s
			}

			.about-stats .stat-card:nth-child(2) {
				animation-delay: .6s
			}

			.about-stats .stat-card:nth-child(3) {
				animation-delay: .65s
			}

			.about-stats .stat-card:nth-child(4) {
				animation-delay: .7s
			}

			.about-more {
				opacity: 0;
				animation: aboutReveal .5s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .8s
			}

			/* ===== RESEARCH SECTION (split layout) ===== */
			.research {
				background: var(--surface);
				position: relative
			}

			.research-grid {
				display: grid;
				grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
				gap: 48px;
				align-items: stretch;
				margin-top: 56px
			}

			/* Left: Research Platforms */
			.research-platforms {
				display: flex;
				flex-direction: column;
				gap: 24px
			}

			.research-platforms>* {
				flex-shrink: 0
			}

			.research-platforms>.rp-carousel {
				flex: 1;
				min-height: 0;
				display: flex;
				flex-direction: column
			}

			.rp-head {
				display: flex;
				align-items: baseline;
				gap: 18px;
				padding-bottom: 18px;
				border-bottom: 1px solid var(--border)
			}

			/* More 链接推到标题行最右（同 News 区样式） */
			.rp-head .news-more-link {
				margin-left: auto
			}

			.rp-head h3 {
				font-family: var(--font-display);
				font-size: 1.5rem;
				font-weight: 800;
				color: var(--fg);
				margin: 0;
				letter-spacing: -.02em
			}

			.rp-head .rp-meta {
				font-size: .7rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: .18em;
				color: var(--muted)
			}

			.rp-intro {
				font-size: .95rem;
				line-height: 1.85;
				color: var(--fg-soft);
				margin: 0;
				padding: 18px 20px;
				border-left: 2px solid var(--accent);
				background: oklch(96% .01 250 / .45);
				border-radius: 0 12px 12px 0
			}

			/* Image-text carousel left image, right text */
			.rp-carousel {
				position: relative;
				border: 1px solid var(--border);
				border-radius: 18px;
				background: #fff;
				overflow: hidden;
				box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04)
			}

			.rp-track {
				position: relative;
				flex: 1;
				min-height: 0
			}

			.rp-slide {
				display: grid;
				grid-template-columns: 1.05fr 1fr;
				gap: 0;
				opacity: 0;
				visibility: hidden;
				transform: translateX(20px);
				min-height: 0
			}

			.rp-slide.active {
				opacity: 1;
				visibility: visible;
				transform: translateX(0)
			}

			.rp-image {
				position: relative;
				overflow: hidden;
				min-height: 280px;
				background: oklch(94% .01 250)
			}

			.rp-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				transition: transform 8s ease;
			}

			.rp-slide.active .rp-image img {
				transform: scale(1.05)
			}

			.rp-image-tag {
				position: absolute;
				left: 14px;
				top: 14px;
				z-index: 3;
				padding: 5px 12px;
				border-radius: 999px;
				background: rgba(0, 0, 0, .55);
				color: #fff;
				font-size: .7rem;
				font-weight: 700;
				letter-spacing: .12em;
				backdrop-filter: blur(6px)
			}

			.rp-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 10px;
				padding: 32px 30px;
				background: #fff;
				min-height: 0
			}

			.rp-content-cat {
				font-size: .7rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .16em;
				color: var(--accent)
			}

			.rp-content h4 {
				font-family: var(--font-display);
				font-size: 1.4rem;
				font-weight: 800;
				color: var(--fg);
				margin: 0;
				letter-spacing: -.02em;
				line-height: 1.25
			}

			.rp-content p {
				font-size: .9rem;
				line-height: 1.7;
				color: var(--fg-soft);
				margin: 0
			}

			.rp-content-link {
				align-self: flex-start;
				display: inline-flex;
				align-items: center;
				gap: 8px;
				margin-top: 6px;
				font-size: .85rem;
				font-weight: 600;
				color: var(--accent);
				text-decoration: none;
				letter-spacing: .02em;
				border-bottom: 1.5px solid var(--accent);
				padding-bottom: 3px;
				transition: gap .3s ease
			}

			.rp-content-link:hover {
				gap: 14px
			}

			/* Carousel controls — overlay ONLY on the image area (left ~52%) */
			.rp-controls {
				position: absolute;
				left: 14px;
				bottom: 14px;
				z-index: 4;
				width: calc(50% - 14px);
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				pointer-events: none
			}

			.rp-controls>* {
				pointer-events: auto
			}

			.rp-dots {
				display: flex;
				gap: 8px
			}

			.rp-dots button {
				width: 24px;
				height: 4px;
				border: none;
				border-radius: 2px;
				background: rgba(255, 255, 255, .45);
				cursor: pointer;
				padding: 0;
				transition: background .3s ease, width .35s cubic-bezier(.16, 1, .3, 1)
			}

			.rp-dots li.slick-active button {
				background: #fff;
				width: 36px
			}

			.rp-nav {
				display: flex;
				gap: 8px
			}

			.rp-nav-btn {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: rgba(0, 0, 0, .45);
				border: 1px solid rgba(255, 255, 255, .25);
				color: #fff;
				display: grid;
				place-items: center;
				cursor: pointer;
				backdrop-filter: blur(8px);
				transition: background .3s ease, transform .3s ease, color .3s ease, border-color .3s ease
			}

			.rp-nav-btn:hover {
				background: #fff;
				color: #0b0b0b;
				border-color: #fff;
				transform: translateY(-1px)
			}

			.rp-nav-btn:active {
				transform: translateY(0) scale(.96)
			}

			.rp-nav-btn svg {
				width: 14px;
				height: 14px
			}

			/* Right: Scholarly Activity news list */
			.research-news {
				display: flex;
				flex-direction: column;
				gap: 18px;
				padding: 32px 30px 26px;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 20px;
				align-self: stretch
			}

			.research-news::before {
				content: '';
				position: absolute;
				top: 0;
				left: 30px;
				right: 30px;
				height: 2px;
				background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
				border-radius: 0 0 2px 2px;
				opacity: .6
			}

			.rn-head {
				display: flex;
				align-items: baseline;
				gap: 14px;
				padding-bottom: 14px;
				border-bottom: 1px solid var(--border)
			}

			.rn-head h3 {
				font-family: var(--font-display);
				font-size: 1.2rem;
				font-weight: 800;
				color: var(--fg);
				margin: 0;
				letter-spacing: -.02em
			}

			.rn-head .rn-meta {
				font-size: .66rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: .16em;
				color: var(--muted)
			}

			.rn-head-more {
				margin-left: auto;
				font-size: .75rem;
				font-weight: 600;
				color: var(--accent);
				text-decoration: none;
				display: inline-flex;
				align-items: center;
				gap: 4px;
				letter-spacing: .02em;
				transition: gap .3s ease
			}

			.rn-head-more:hover {
				gap: 8px
			}

			.rn-list {
				list-style: none;
				display: flex;
				flex-direction: column;
				margin: 0;
				padding: 0;
				flex: 1
			}

			.rn-item {
				border-bottom: 1px solid var(--border)
			}

			.rn-item:last-child {
				border-bottom: none
			}

			.rn-item-featured {
				padding: 6px 0 14px
			}

			.rn-item+.rn-item-featured,
			.rn-item-featured+.rn-item-featured {
				padding-top: 14px
			}

			.rn-item a {
				display: grid;
				grid-template-columns: 1fr 16px;
				gap: 14px;
				align-items: start;
				padding: 14px 0;
				text-decoration: none;
				color: inherit
			}

			.rn-item a:hover {
				background: none
			}

			.rn-date {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 6px 0;
				border-radius: 8px;
				background: oklch(96% .01 250 / .55);
				color: var(--accent);
				line-height: 1
			}

			.rn-day {
				font-family: var(--font-display);
				font-size: 1.25rem;
				font-weight: 800;
				letter-spacing: -.02em
			}

			.rn-month {
				font-size: .62rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .1em;
				margin-top: 2px
			}

			.rn-body {
				display: flex;
				flex-direction: column;
				gap: 6px;
				min-width: 0
			}

			.rn-body h4 {
				font-family: var(--font-display);
				font-size: .92rem;
				font-weight: 600;
				color: var(--fg);
				margin: 0;
				line-height: 1.4;
				letter-spacing: -.005em
			}

			.rn-item a:hover .rn-body h4 {
				color: var(--accent)
			}

			.rn-meta-row {
				display: flex;
				align-items: center;
				gap: 8px;
				flex-wrap: wrap
			}

			.rn-cat {
				font-size: .62rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .08em;
				color: var(--accent);
				background: var(--accent-light);
				padding: 2px 8px;
				border-radius: 4px
			}

			.rn-time {
				font-size: .72rem;
				color: var(--muted)
			}

			.rn-arrow {
				width: 14px;
				height: 14px;
				color: var(--muted);
				align-self: center;
				transition: transform .3s ease, color .3s ease
			}

			.rn-arrow svg {
				width: 14px;
				height: 14px
			}

			.rn-item a:hover .rn-arrow {
				transform: translateX(2px);
				color: var(--accent)
			}

			/* Featured rn-item — structured lecture details */
			.rn-item-featured a {
				grid-template-columns: 1fr 16px;
				gap: 14px;
				align-items: start;
				padding: 18px 16px 18px 14px;
				margin: 0 -10px;
				border-radius: 12px;
				background: linear-gradient(180deg, oklch(98% .01 250 / .6), oklch(96% .01 250 / .25));
				border: 1px solid oklch(92% .01 250 / .8);
				transition: background .3s ease, border-color .3s ease
			}

			.rn-item-featured a:hover {
				background: linear-gradient(180deg, oklch(98% .01 250 / .9), oklch(96% .01 250 / .5));
				border-color: var(--accent)
			}

			.rn-item-featured .rn-date {
				background: var(--accent);
				color: #fff
			}

			.rn-item-featured .rn-body h4 {
				font-size: 1rem;
				font-weight: 700;
				color: var(--fg);
				margin: 0 0 8px;
				line-height: 1.35
			}

			.rn-item-featured .rn-body h4::before {
				content: '';
				display: inline-block;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--accent);
				margin-right: 8px;
				vertical-align: middle;
				box-shadow: 0 0 0 4px oklch(96% .01 250 / .6)
			}

			.rn-meta-grid {
				display: flex;
				flex-direction: column;
				gap: 5px;
				border-top: 1px dashed var(--border);
				padding-top: 8px;
				margin-top: 2px
			}

			.rn-meta-line {
				display: flex;
				align-items: baseline;
				gap: 10px;
				font-size: .78rem;
				line-height: 1.5
			}

			.rn-meta-label {
				flex-shrink: 0;
				min-width: 54px;
				font-size: .6rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .1em;
				color: var(--accent);
				padding: 2px 6px;
				border-radius: 4px;
				background: oklch(96% .01 250 / .55);
				text-align: center
			}

			.rn-meta-value {
				color: var(--fg-soft);
				font-weight: 500
			}

			.rn-more {
				align-self: flex-start;
				display: inline-flex;
				align-items: center;
				gap: 8px;
				margin-top: 6px;
				font-size: .82rem;
				font-weight: 600;
				color: var(--accent);
				text-decoration: none;
				letter-spacing: .02em;
				border-bottom: 1.5px solid var(--accent);
				padding-bottom: 4px;
				transition: gap .3s ease
			}

			.rn-more:hover {
				gap: 12px
			}

			/* Staggered reveal for research */
			.research-platforms,
			.research-news {
				opacity: 0;
				animation: aboutReveal .8s cubic-bezier(.16, 1, .3, 1) forwards;
				animation-delay: .15s
			}

			.rp-item,
			.rn-item {
				opacity: 0;
				animation: aboutReveal .5s cubic-bezier(.16, 1, .3, 1) forwards
			}

			.rp-item:nth-child(1) {
				animation-delay: .35s
			}

			.rp-item:nth-child(2) {
				animation-delay: .4s
			}

			.rp-item:nth-child(3) {
				animation-delay: .45s
			}

			.rp-item:nth-child(4) {
				animation-delay: .5s
			}

			.rn-item:nth-child(1) {
				animation-delay: .4s
			}

			.rn-item:nth-child(2) {
				animation-delay: .45s
			}

			.rn-item:nth-child(3) {
				animation-delay: .5s
			}

			.rn-item:nth-child(4) {
				animation-delay: .55s
			}

			.rn-item:nth-child(5) {
				animation-delay: .6s
			}

			/* ===== CONTACT / FOOTER ===== */
			.contact {
				background: var(--accent);
				color: #fff;
				padding: 80px 0 0
			}

			.contact-top {
				display: grid;
				grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
				gap: 40px 28px;
				padding-bottom: 48px
			}

			.footer-logo {
				height: 68px;
				width: auto;
				display: block;
				margin-bottom: 18px;
				filter: brightness(0) invert(1)
			}

			.contact-brand p {
				font-size: .88rem;
				opacity: .8;
				max-width: 360px;
				margin-top: 10px;
				line-height: 1.6
			}

			.contact-col h4 {
				font-size: .85rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: .06em;
				margin-bottom: 14px;
				opacity: .5
			}

			.contact-links {
				display: flex;
				flex-direction: column;
				gap: 4px
			}

			.contact-links a {
				display: block;
				font-size: .88rem;
				color: rgba(255, 255, 255, .6);
				padding: 4px 0;
				transition: color .2s
			}

			.contact-links a:hover {
				color: #fff
			}

			.footer-bar {
				border-top: 1px solid rgba(255, 255, 255, .15);
				padding: 24px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				gap: 12px;
				font-size: .82rem;
				color: rgba(255, 255, 255, .5)
			}

			.footer-bar a {
				color: rgba(255, 255, 255, .5)
			}

			.footer-bar a:hover {
				color: #fff
			}

			/* ===== RESPONSIVE ===== */
			@media(max-width:1100px) {
				.news-2col-grid {
					grid-template-columns: minmax(0, 1fr);
					gap: 24px
				}

				.nmc-image-wrap {
					height: 220px
				}

				.ann-list-panel {
					grid-template-columns: repeat(2, 1fr)
				}
			}

			@media(max-width:960px) {
				.contact-top {
					grid-template-columns: 1fr 1fr;
					gap: 36px 28px
				}

				.contact-brand {
					grid-column: 1 / -1
				}

				.about-eyebrow {
					margin-bottom: 18px
				}

				.about-top {
					gap: 20px;
					margin-bottom: 32px
				}

				.about-grid {
					grid-template-columns: 1fr;
					gap: 28px
				}

				.about-image {
					min-height: 420px
				}

				.about-info {
					padding: 0
				}

				.about-card-title {
					font-size: 1.7rem
				}

				.about-info .desc {
					font-size: .95rem
				}

				.about-stats {
					grid-template-columns: repeat(2, 1fr);
					gap: 12px
				}

				.stat-card {
					padding: 18px 16px 16px;
					border-radius: 14px
				}

				.stat-card .stat-num {
					font-size: 1.45rem
				}

				.stat-card .stat-label {
					font-size: .65rem;
					letter-spacing: .08em
				}

				.about .container {
					padding: 60px 20px 50px
				}

				.hero-news-unboxed {
					max-width: 100%
				}

				/* Mobile hero news: crossfade only — no height jumping */
				.hero-news-unboxed .hn-items-u {
					min-height: 380px;
					overflow: hidden
				}

				.hero-news-unboxed .hn-item-u {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: auto;
					opacity: 0;
					transform: none;
					transition: opacity .5s ease;
					pointer-events: none
				}

				.hero-news-unboxed .hn-item-u.active {
					opacity: 1;
					pointer-events: auto
				}

				.hero-news-unboxed .hn-item-u.leaving {
					opacity: 0;
					transition: opacity .35s ease
				}

				.hero-news-unboxed .hn-item-u .hn-meta,
				.hero-news-unboxed .hn-item-u h2,
				.hero-news-unboxed .hn-item-u p,
				.hero-news-unboxed .hn-item-u .hn-link {
					opacity: 1;
					transform: none;
					transition: opacity .35s ease
				}

				.hero-news-unboxed .hn-item-u:not(.active) .hn-meta,
				.hero-news-unboxed .hn-item-u:not(.active) h2,
				.hero-news-unboxed .hn-item-u:not(.active) p,
				.hero-news-unboxed .hn-item-u:not(.active) .hn-link {
					opacity: 0;
					transition: opacity .2s ease
				}

				.research-grid {
					grid-template-columns: minmax(0, 1fr);
					gap: 36px;
					margin-top: 40px;
					align-items: start
				}

				.research-platforms {
					min-height: 0
				}

				.research-news {
					position: static;
					padding: 28px 24px 24px
				}

				.rn-item a {
					grid-template-columns: 1fr 14px;
					gap: 12px;
					padding: 12px 16px
				}

				.news-2col-grid {
					grid-template-columns: minmax(0, 1fr);
					gap: 24px
				}

				.news-section-header {
					flex-wrap: wrap;
					gap: 8px;
					margin-bottom: 28px
				}

				.news-tabs li a {
					padding: 0 16px 12px;
					font-size: 1rem
				}

				.ann-list-panel {
					grid-template-columns: 1fr
				}

				/* Carousel — stack vertically on tablet/mobile */
				.rp-slide {
					grid-template-columns: 1fr;
					grid-template-rows: auto auto
				}

				.rp-image {
					height: 260px;
					overflow: hidden
				}

				.rp-content {
					padding: 24px 22px 28px
				}

				.rp-content h4 {
					font-size: 1.2rem
				}

				.rp-content p {
					font-size: .85rem;
					line-height: 1.6
				}

				.rp-content-link {
					font-size: .8rem
				}

				.rp-controls {
					left: 14px;
					right: 14px;
					bottom: 14px;
					width: auto
				}

				.nav-row1 {
					padding: 10px 0
				}

				.nav-row1 .nav-inner {
					padding: 0 20px;
				}

				.nav-backdrop {
					display: none
				}

				body.nav-open .nav-backdrop {
					display: block;
					position: fixed;
					inset: 0;
					top: 0;
					background: rgba(0, 0, 0, .35);
					z-index: 999;
					animation: fadeIn .25s ease
				}

				.nav-row1-right .nav-search,
				.nav-row1-right .nav-lang {
					display: none
				}

				/* ===== Mobile #mainNav: full-screen overlay ===== */
				.nav-mobile-panel {
					display: flex;
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: var(--nav-dark);
					flex-direction: column;
					padding: 70px 0 40px;
					overflow-y: auto;
					box-shadow: 0 8px 30px oklch(0% 0 0 / 0.15);
					transform: translateX(100%);
					transition: transform .35s cubic-bezier(.25, .1, .25, 1);
					z-index: 1000
				}

				.nav-mobile-panel.open {
					transform: translateX(0)
				}

				.nav-mobile-panel .nav-links {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					position: static;
					transform: none;
					order: 0
				}

				.nav-links>li {
					width: 100%
				}

				.nav-links>li>a {
					padding: 16px 24px;
					border-radius: 0;
					font-size: 1.05rem;
					font-weight: 500;
					color: #fff;
					display: flex;
					align-items: center;
					gap: 8px;
					justify-content: space-between;
					-webkit-tap-highlight-color: transparent;
					width: 100%;
					box-sizing: border-box
				}

				.nav-links>li>a:active {
					background: rgba(255, 255, 255, .12)
				}

				.nav-links>li>a .arrow {
					transition: transform .3s;
					font-size: .7rem;
					opacity: .6
				}

				.nav-links>li.expanded>a .arrow {
					transform: rotate(180deg);
					opacity: 1
				}

				/* ===== Mobile dropdown: simple accordion, no desktop leakage ===== */
				#navLinks .dropdown {
					display: none;
					position: static;
					top: auto;
					left: auto;
					min-width: 0;
					background: transparent;
					border: none;
					border-radius: 0;
					box-shadow: none;
					opacity: 1;
					visibility: visible;
					transform: none;
					padding: 0 0 6px 0;
					margin: 0;
					pointer-events: auto;
					transition: none;
					z-index: auto
				}

				#navLinks>li.expanded .dropdown {
					display: block
				}

				#navLinks .dropdown a {
					display: block;
					padding: 12px 24px 12px 52px;
					border-radius: 0;
					font-size: .92rem;
					font-weight: 500;
					color: #fff;
					background: rgba(255, 255, 255, .05);
					width: 100%;
					box-sizing: border-box;
					transition: none
				}

				#navLinks .dropdown a:active {
					background: rgba(255, 255, 255, .15)
				}

				#navLinks .dropdown .drop-label {
					color: rgba(255, 255, 255, .45);
					border-top-color: rgba(255, 255, 255, .08);
					padding: 10px 24px 4px;
					font-size: .7rem
				}

				.nav-utils {
					margin-top: auto;
					padding: 24px 24px 0;
					border-top: 1px solid rgba(255, 255, 255, .12);
					display: flex;
					flex-direction: column;
					gap: 16px
				}

				.nav-mobile-search {
					position: relative;
					display: flex;
					align-items: center
				}

				.nav-mobile-search-icon {
					position: absolute;
					left: 14px;
					top: 50%;
					transform: translateY(-50%);
					width: 18px;
					height: 18px;
					pointer-events: none;
					z-index: 2;
					color: rgba(255, 255, 255, .5);
					transition: color .25s
				}

				.nav-mobile-search input {
					width: 100%;
					padding: 12px 16px 12px 44px;
					border: none;
					outline: none;
					border-radius: 10px;
					background: rgba(255, 255, 255, .1);
					color: #fff;
					font-size: .9rem;
					font-family: var(--font-body);
					transition: background .25s
				}

				.nav-mobile-search input::placeholder {
					color: rgba(255, 255, 255, .45)
				}

				.nav-mobile-search input:focus {
					background: rgba(255, 255, 255, .18);
					outline: none
				}

				.nav-mobile-search:focus-within .nav-mobile-search-icon {
					color: rgba(255, 255, 255, .8)
				}

				.nav-mobile-lang {
					display: flex;
					align-items: center;
					gap: 0;
					background: rgba(255, 255, 255, .1);
					border-radius: 10px;
					overflow: hidden
				}

				.nav-mobile-lang a {
					flex: 1;
					display: block;
					padding: 12px 16px;
					border: none;
					cursor: pointer;
					font-size: .85rem;
					font-weight: 600;
					letter-spacing: .04em;
					background: transparent;
					color: rgba(255, 255, 255, .6);
					text-decoration: none;
					text-align: center;
					transition: all .25s;
					font-family: var(--font-body);
					-webkit-tap-highlight-color: transparent
				}

				.nav-mobile-lang a.active {
					background: rgba(255, 255, 255, .2);
					color: #fff
				}

				.nav-mobile-lang a:active {
					background: rgba(255, 255, 255, .25)
				}

				.nav-toggle {
					display: flex;
					position: relative;
					z-index: 1001
				}

				.nav-toggle span {
					display: block;
					width: 26px;
					height: 2px;
					background: #fff;
					border-radius: 2px;
					transition: all .3s;
					transform-origin: center
				}

				body.nav-open .nav-toggle span:nth-child(1) {
					transform: translateY(7px) rotate(45deg)
				}

				body.nav-open .nav-toggle span:nth-child(2) {
					opacity: 0;
					transform: scaleX(0)
				}

				body.nav-open .nav-toggle span:nth-child(3) {
					transform: translateY(-7px) rotate(-45deg)
				}

				/* Mobile scroll: accent background */
				#mainNav.mobile-scrolled {
					background: var(--accent);
					box-shadow: 0 1px 0 oklch(0% 0 0 / .1), 0 8px 32px oklch(0% 0 0 / .08)
				}

				/* Mobile: More News at bottom of container */
				.news-first .container {
					display: flex;
					flex-direction: column
				}

				.news-more-link {
					display: none
				}

				.news-more-link-mob {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					gap: 8px;
					width: 100%;
					padding: 14px 20px;
					margin-top: 20px;
					background: var(--accent);
					color: #fff;
					font-size: .9rem;
					font-weight: 600;
					border-radius: 12px;
					text-decoration: none;
					transition: opacity .25s, transform .25s
				}

				.news-more-link-mob:active {
					opacity: .8;
					transform: scale(.97)
				}

				.nmc-more {
					display: none
				}

				.nmc-desc {
					margin-bottom: 40px;
				}

				/* Mobile: news-thumb-list item spacing */
				.nt-item+.nt-item {
					margin-top: 10px
				}
			}

			@media(max-width:600px) {
				section {
					padding: 70px 0
				}

				.hero {
					min-height: 80vh
				}

				.hero-news-unboxed h2 {
					font-size: 1.5rem
				}

				.about-eyebrow {
					margin-bottom: 16px
				}

				.about-eyebrow-line {
					width: 24px
				}

				.about-eyebrow-text {
					font-size: .7rem;
					letter-spacing: .16em
				}

				.about-top {
					gap: 16px;
					margin-bottom: 24px
				}

				.about-h2 {
					font-size: 2.2rem
				}

				.about-grid {
					grid-template-columns: 1fr;
					gap: 20px
				}

				.about-image {
					min-height: 280px;
					border-radius: 14px
				}

				.about-info {
					gap: 18px
				}

				.about-card-title {
					font-size: 1.4rem
				}

				.about-info .desc {
					font-size: .88rem;
					line-height: 1.7
				}

				.about-stats {
					grid-template-columns: repeat(2, 1fr);
					gap: 10px
				}

				.stat-card {
					padding: 16px 14px 14px;
					border-radius: 12px
				}

				.stat-card .stat-num {
					font-size: 1.35rem
				}

				.stat-card .stat-label {
					font-size: .6rem;
					letter-spacing: .06em
				}

				.about-more {
					font-size: .95rem;
					padding: 14px 24px
				}

				.about .container {
					padding: 48px 16px 40px
				}

				.news-first {
					padding: 60px 0 60px
				}

				.hero-news-unboxed .hn-items-u {
					min-height: 320px;
					overflow: hidden
				}

				.contact-top {
					grid-template-columns: 1fr 1fr;
					gap: 28px
				}

				.footer-bar {
					flex-direction: column;
					text-align: center
				}

				#backToTop {
					bottom: 20px;
					right: 20px;
					width: 42px;
					height: 42px
				}

				.nav-links>li>a {
					padding: 14px 20px;
					font-size: 1rem;
					color: #fff
				}

				#navLinks .dropdown a {
					padding: 10px 20px 10px 48px
				}

				.nav-utils {
					padding: 20px 20px 0
				}

				.nmc-image-wrap {
					height: 190px
				}

				.nmc-body {
					padding: 20px
				}

				.nmc-title {
					font-size: 1.1rem
				}

				.nt-thumb {
					width: 90px;
					height: 66px
				}

				/* Research carousel — small phones */
				.rp-image {
					height: 220px;
					overflow: hidden
				}

				.rp-content {
					padding: 20px 18px 24px
				}

				.rp-content h4 {
					font-size: 1.05rem
				}

				.rp-content p {
					font-size: .82rem
				}

				.rp-intro {
					font-size: .88rem;
					line-height: 1.7;
					padding: 14px 16px
				}

				
			}

			/* ===== UTILITY & ACCESSIBILITY ===== */
			.skip-link {
				position: fixed;
				top: -100%;
				left: 16px;
				z-index: 9999;
				padding: 12px 24px;
				border-radius: 0 0 8px 8px;
				background: var(--accent);
				color: #fff;
				font-size: .85rem;
				font-weight: 600;
				text-decoration: none;
				transition: top .2s
			}

			.skip-link:focus {
				top: 0;
				outline: 3px solid #fff;
				outline-offset: 2px
			}

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

			button:focus-visible {
				outline: 3px solid oklch(62% 0.20 265);
				outline-offset: 2px
			}

			/* Dropdown keyboard support (desktop only) */
			@media(min-width:961px) {
				.nav-links>li:focus-within>a {
					background: rgba(255, 255, 255, .15);
					color: #fff
				}

				.nav-links>li:focus-within>a .arrow {
					transform: rotate(180deg)
				}

				.nav-links>li:focus-within .dropdown {
					opacity: 1;
					visibility: visible;
					transform: translateX(-50%) translateY(0);
					transition-delay: 0s;
					pointer-events: auto
				}
			}

			/* Reduced motion */
			@media(prefers-reduced-motion:reduce) {

				*,
				*::before,
				*::after {
					animation-duration: 0.01ms !important;
					animation-iteration-count: 1 !important;
					transition-duration: 0.01ms !important;
					scroll-behavior: auto !important
				}

				html {
					scroll-behavior: auto
				}

				.hn-item-u,
				.hn-item-u .hn-meta,
				.hn-item-u h2,
				.hn-item-u p,
				.hn-item-u .hn-link,
				.hn-item-u .hn-ctrls {
					animation: none !important;
					transition: none !important
				}

				.hn-items-u .slick-slide,
				.nmc-slides .slick-slide,
				.rp-track .slick-slide {
					transition: none !important
				}

				.hero-bg-canvas {
					transition: none !important;
					animation: none !important
				}
			}

			@keyframes fadeIn {
				from {
					opacity: 0
				}

				to {
					opacity: 1
				}
			}

			/* ============================================================
			   SLICK 轮播适配（jquery + slick 插件）
			   - slide 叠放：absolute 覆盖 slick 的 float 排列，current 撑高
			   - transition：接管 slick 的 inline 过渡，透明度+位移同步动画
			   - dots：slick 生成 ul.slick-dots > li > button 结构，重置样式
			   ============================================================ */
			/* 背景图数据载体：仅供博达后台更换与 JS 读取，不参与显示
			   （!important 用于压过 slick.css 的 .slick-slide img 规则） */
			.hn-bg {
				display: none !important
			}

			.hn-items-u .slick-slide,
			.nmc-slides .slick-slide,
			.rp-track .slick-slide {
				position: absolute !important;
				top: 0 !important;
				left: 0 !important;
				width: 100%
			}

			.hn-items-u .slick-slide.active,
			.nmc-slides .slick-slide.active,
			.rp-track .slick-slide.active {
				position: relative !important
			}

			.hn-items-u .slick-slide {
				transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1) !important
			}

			.nmc-slides .slick-slide {
				transition: opacity .7s ease, transform .35s ease !important
			}

			/* fade 模式下 slide 由上方规则叠放，track 宽度无用；
			   改由 slick-list 精确决定 slide 宽度，消除 slick Math.ceil
			   取整带来的 0.xpx 溢出（否则卡片最右 1px 边框会被
			   slick-list 的 overflow:hidden 裁掉） */
			.nmc-slides .slick-track {
				position: static !important;
				width: auto !important
			}

			.nmc-slides .slick-slide {
				width: 100% !important
			}

			.rp-track .slick-slide {
				transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1) !important
			}

			.hn-dots .slick-dots,
			.nmc-dots .slick-dots,
			.rp-dots .slick-dots {
				display: flex;
				align-items: center;
				margin: 0;
				padding: 0;
				list-style: none
			}

			.hn-dots .slick-dots {
				gap: 6px
			}

			.nmc-dots .slick-dots {
				gap: 10px
			}

			.rp-dots .slick-dots {
				gap: 8px
			}
/* ============================================================
   INNER PAGES SHARED (page hero / cms layout / lists)
   ============================================================ */

.nav-links>li>a.active {
				color: #fff
			}

.nav-links>li>a.active::after {
				transform: scaleX(1)
			}

/* ===== PAGE HERO — inner page banner ===== */
.page-hero {
				position: relative;
				color: #fff;
				padding: 200px 0 100px;
				overflow: hidden;
				background: linear-gradient(140deg, oklch(24% .055 262) 0%, oklch(33% .10 263) 48%, oklch(46% .16 265) 100%)
			}

.ph-bg {
				position: absolute;
				inset: 0;
				background-size: cover;
				background-position: center;
				opacity: .2;
				transform: scale(1.06)
			}

.ph-overlay {
				position: absolute;
				inset: 0;
				background: linear-gradient(120deg, oklch(22% .05 262 / .92) 15%, oklch(30% .09 263 / .55) 55%, oklch(46% .16 265 / .35) 100%)
			}

.ph-grid {
				position: absolute;
				inset: 0;
				background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
				background-size: 72px 72px;
				-webkit-mask-image: radial-gradient(ellipse at 72% 18%, #000 15%, transparent 68%);
				mask-image: radial-gradient(ellipse at 72% 18%, #000 15%, transparent 68%)
			}

.ph-ghost {
				position: absolute;
				right: -1%;
				bottom: -7%;
				font-family: var(--font-display);
				font-weight: 900;
				font-size: clamp(8rem, 21vw, 19rem);
				line-height: 1;
				color: transparent;
				-webkit-text-stroke: 1.5px rgba(255, 255, 255, .10);
				letter-spacing: -.04em;
				user-select: none;
				pointer-events: none;
				white-space: nowrap
			}

.ph-inner {
				position: relative;
				z-index: 2
			}

.crumbs {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: .76rem;
				font-weight: 600;
				letter-spacing: .10em;
				text-transform: uppercase;
				margin-bottom: 22px
			}

.crumbs a {
				color: rgba(255, 255, 255, .65)
			}

.crumbs a:hover {
				color: #fff;
				opacity: 1
			}

.crumbs .sep {
				opacity: .4
			}

.crumbs .cur {
				color: #fff
			}

.page-hero h1 {
				font-family: var(--font-display);
				font-size: clamp(2.4rem, 5.4vw, 4.2rem);
				font-weight: 900;
				letter-spacing: -.04em;
				line-height: 1.02;
				margin-bottom: 18px
			}

.page-hero .ph-lead {
				font-size: 1.08rem;
				line-height: 1.7;
				color: rgba(255, 255, 255, .75);
				max-width: 660px
			}

.page-hero .crumbs {
				opacity: 0;
				animation: heroUp .7s cubic-bezier(.16, 1, .3, 1) .05s forwards
			}

.page-hero h1 {
				opacity: 0;
				animation: heroUp .8s cubic-bezier(.16, 1, .3, 1) .14s forwards
			}

.page-hero .ph-lead {
				opacity: 0;
				animation: heroUp .8s cubic-bezier(.16, 1, .3, 1) .24s forwards
			}

@keyframes heroUp {
	from {
		opacity: 0;
		transform: translateY(26px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

/* ===== REVEAL ON SCROLL ===== */
[data-reveal] {
				opacity: 0;
				transform: translateY(26px);
				transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)
			}

[data-reveal].in-view {
				opacity: 1;
				transform: translateY(0)
			}

[data-reveal][data-delay="1"] {
				transition-delay: .08s
			}

[data-reveal][data-delay="2"] {
				transition-delay: .16s
			}

[data-reveal][data-delay="3"] {
				transition-delay: .24s
			}

[data-reveal][data-delay="4"] {
				transition-delay: .32s
			}

[data-reveal][data-delay="5"] {
				transition-delay: .40s
			}

.cta-panel {
				position: relative;
				overflow: hidden;
				border-radius: 24px;
				background: linear-gradient(135deg, oklch(42% .14 264) 0%, oklch(48% .16 265) 60%, oklch(52% .17 266) 100%);
				padding: 72px 64px;
				color: #fff;
				display: grid;
				grid-template-columns: 1.4fr 1fr;
				gap: 36px;
				align-items: center;
				box-shadow: 0 30px 70px -30px oklch(48% .16 265 / .5)
			}

.cta-panel::before {
				content: '';
				position: absolute;
				right: -120px;
				top: -120px;
				width: 340px;
				height: 340px;
				border-radius: 50%;
				border: 1.5px solid rgba(255, 255, 255, .14);
				pointer-events: none
			}

.cta-panel::after {
				content: '';
				position: absolute;
				right: -60px;
				bottom: -140px;
				width: 260px;
				height: 260px;
				border-radius: 50%;
				border: 1.5px solid rgba(255, 255, 255, .10);
				pointer-events: none
			}

.cta-panel h2 {
				font-family: var(--font-display);
				font-size: clamp(1.7rem, 3vw, 2.4rem);
				font-weight: 800;
				letter-spacing: -.03em;
				line-height: 1.1;
				margin-bottom: 14px
			}

.cta-panel p {
				font-size: .98rem;
				line-height: 1.7;
				color: rgba(255, 255, 255, .8);
				max-width: 52ch
			}

.cta-actions {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				gap: 12px;
				align-items: flex-start
			}

.cta-btn {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				padding: 15px 30px;
				border-radius: 999px;
				background: #fff;
				color: var(--accent);
				font-size: .98rem;
				font-weight: 700;
				box-shadow: 0 10px 26px -8px oklch(0% 0 0 / .35);
				transition: gap .3s, transform .3s, box-shadow .3s
			}

.cta-btn:hover {
				gap: 15px;
				transform: translateY(-2px);
				box-shadow: 0 16px 34px -10px oklch(0% 0 0 / .4)
			}

.cta-note {
				font-size: .82rem;
				color: rgba(255, 255, 255, .65)
			}

.contact-brand strong {
				font-size: 1.2rem;
				font-weight: 700
			}

/* ===== CMS INNER PAGE LAYOUT (sidebar + content) ===== */
.page-body {
				padding: 56px 0 110px
			}
.page-body-white{ background:#fff;}
.page-layout {
				display: grid;
				grid-template-columns: 290px minmax(0, 1fr);
				gap: 48px;
				align-items: start
			}

/* --- Left sidebar menu --- */
.side-menu {
				position: sticky;
				top: calc(var(--nav-h) + 24px);
				background: var(--surface);
				border: 1px solid var(--border);
				border-radius: var(--radius);
				overflow: hidden
			}

.side-cat {
				padding: 20px 24px;
				font-family: var(--font-display);
				font-size: 1.12rem;
				font-weight: 700;
				letter-spacing: -.01em;
				color: var(--fg);
				border-bottom: 2px solid var(--accent)
			}

.side-nav {
				display: flex;
				flex-direction: column
			}

.side-nav a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				padding: 14px 24px;
				font-size: .95rem;
				font-weight: 500;
				color: var(--fg-soft);
				border-bottom: 1px solid var(--border);
				transition: all .22s
			}

.side-nav a:last-child {
				border-bottom: none
			}

.side-nav a svg {
				width: 14px;
				height: 14px;
				flex: none;
				opacity: 0;
				transform: translateX(-4px);
				transition: all .22s
			}

.side-nav a:hover {
				color: var(--accent);
				padding-left: 30px
			}

.side-nav a.active {
				background: oklch(96% 0.02 265);
				color: var(--accent);
				font-weight: 700
			}

.side-nav a.active svg {
				opacity: 1;
				transform: none
			}

.content-title {
				font-family: var(--font-display);
				font-size: 1.7rem;
				font-weight: 700;
				letter-spacing: -.02em;
				color: var(--fg)
			}

.position {
				font-size: .82rem;
				color: var(--muted);
				white-space: nowrap
			}

.position a {
				color: var(--muted)
			}

.position a:hover {
				color: var(--accent);
				opacity: 1
			}

.position .cur {
				color: var(--accent)
			}

/* ============================================================
   ABOUT US PAGE
   ============================================================ */

/* ===== INTRO — editorial split ===== */
.intro {
				background: #fafbfc;
				padding: 104px 0 96px
			}

.intro-grid {
				display: grid;
				grid-template-columns: .92fr 1.08fr;
				gap: 56px;
				align-items: stretch
			}

.intro-copy {
				display: flex;
				flex-direction: column;
				gap: 20px;
				justify-content: center
			}

.intro-copy .big-h2 {
				font-family: var(--font-display);
				font-size: clamp(2.6rem, 5.6vw, 4.6rem);
				font-weight: 900;
				letter-spacing: -.045em;
				line-height: .98
			}

.intro-copy .big-h2 .dot {
				color: var(--accent)
			}

.intro-copy .desc {
				font-size: 1rem;
				line-height: 1.85;
				color: var(--fg-soft);
				max-width: 60ch
			}

.intro-copy .desc strong {
				color: var(--accent);
				font-weight: 700
			}

.intro-more {
				align-self: flex-start;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				margin-top: 8px;
				padding: 15px 28px;
				font-size: .98rem;
				font-weight: 700;
				color: #fff;
				background: var(--accent);
				border-radius: 999px;
				box-shadow: 0 6px 18px -6px oklch(60% .18 250 / .45);
				transition: gap .3s ease, transform .3s ease, box-shadow .3s ease
			}

.intro-more svg {
				transition: transform .3s ease
			}

.intro-more:hover {
				gap: 15px;
				transform: translateY(-1px);
				box-shadow: 0 10px 24px -6px oklch(60% .18 250 / .55)
			}

.intro-media {
				position: relative;
				border-radius: 18px;
				overflow: hidden;
				min-height: 470px;
				box-shadow: 0 20px 50px -20px oklch(0% 0 0 / 0.18)
			}

.intro-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				inset: 0;
				transition: transform 1.2s cubic-bezier(.16, 1, .3, 1)
			}

.intro-media:hover img {
				transform: scale(1.05)
			}

.intro-media::after {
				content: '';
				position: absolute;
				inset: 0;
				background: linear-gradient(180deg, transparent 55%, oklch(0% 0 0 / .35) 100%);
				pointer-events: none
			}

.intro-media .img-caption {
				position: absolute;
				left: 20px;
				bottom: 20px;
				right: 20px;
				color: #fff;
				font-size: .76rem;
				letter-spacing: .08em;
				text-transform: uppercase;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 8px;
				z-index: 1
			}

.intro-media .img-caption::before {
				content: '';
				width: 18px;
				height: 1px;
				background: #fff
			}

.stat-card .stat-num .suffix {
				color: var(--accent)
			}

/* ===== MISSION / VISION / VALUES ===== */
.values {
				background: var(--surface)
			}

.values-head {
				max-width: 720px;
				margin-bottom: 48px
			}

.values-head p {
				font-size: .98rem;
				line-height: 1.8;
				color: var(--fg-soft)
			}

.values-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 22px
			}

.value-card {
				position: relative;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: var(--radius);
				padding: 36px 30px;
				overflow: hidden;
				transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s
			}

.value-card:hover {
				transform: translateY(-5px);
				border-color: oklch(80% .05 265);
				box-shadow: 0 16px 40px -14px oklch(60% .18 250 / .2)
			}

.value-card::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background: linear-gradient(90deg, var(--accent), var(--accent-2));
				opacity: 0;
				transition: opacity .35s
			}

.value-card:hover::before {
				opacity: 1
			}

.value-icon {
				width: 54px;
				height: 54px;
				border-radius: 14px;
				background: var(--accent-light);
				display: grid;
				place-items: center;
				margin-bottom: 22px
			}

.value-icon svg {
				width: 26px;
				height: 26px;
				stroke: var(--accent);
				fill: none;
				stroke-width: 1.8;
				stroke-linecap: round;
				stroke-linejoin: round
			}

.value-card h3 {
				font-family: var(--font-display);
				font-size: 1.25rem;
				font-weight: 800;
				letter-spacing: -.02em;
				margin-bottom: 10px
			}

.value-card p {
				font-size: .92rem;
				line-height: 1.75;
				color: var(--fg-soft)
			}

/* ===== DEAN'S MESSAGE ===== */
.dean {
				background: #fafbfc
			}

.dean-grid {
				display: grid;
				grid-template-columns: .85fr 1.15fr;
				gap: 56px;
				align-items: stretch
			}

.dean-media {
				position: relative;
				border-radius: 18px;
				overflow: hidden;
				min-height: 440px;
				box-shadow: 0 20px 50px -20px oklch(0% 0 0 / 0.18)
			}

.dean-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: top center;
				position: absolute;
				inset: 0;
				transition: transform 1.2s cubic-bezier(.16, 1, .3, 1)
			}

.dean-media:hover img {
				transform: scale(1.04)
			}

.dean-media::after {
				content: '';
				position: absolute;
				inset: 0;
				background: linear-gradient(180deg, transparent 55%, oklch(0% 0 0 / .4) 100%);
				pointer-events: none
			}

.dean-media .dean-name {
				position: absolute;
				left: 22px;
				bottom: 20px;
				z-index: 1;
				color: #fff
			}

.dean-media .dean-name b {
				display: block;
				font-family: var(--font-display);
				font-size: 1.15rem;
				font-weight: 800;
				letter-spacing: -.01em
			}

.dean-media .dean-name span {
				font-size: .8rem;
				opacity: .75
			}

.dean-quote {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 18px
			}

.dean-quote blockquote {
				position: relative;
				font-family: var(--font-display);
				font-size: clamp(1.15rem, 1.9vw, 1.55rem);
				font-weight: 600;
				letter-spacing: -.015em;
				line-height: 1.55;
				color: var(--fg);
				padding-left: 34px
			}

.dean-quote blockquote::before {
				content: '';
				position: absolute;
				left: 0;
				top: 6px;
				bottom: 6px;
				width: 3px;
				border-radius: 2px;
				background: linear-gradient(180deg, var(--accent), var(--accent-2))
			}

.dean-quote .dean-text {
				font-size: .96rem;
				line-height: 1.85;
				color: var(--fg-soft);
				max-width: 66ch
			}

/* ===== MILESTONES TIMELINE ===== */
.milestones {
				background: var(--surface)
			}

.milestones-head {
				text-align: center;
				max-width: 640px;
				margin: 0 auto 60px
			}

.milestones-head .section-label {
				justify-content: center
			}

.milestones-head p {
				font-size: .96rem;
				color: var(--fg-soft);
				line-height: 1.8
			}

.timeline {
				position: relative;
				max-width: 920px;
				margin: 0 auto
			}

.timeline::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 4px;
				bottom: 4px;
				width: 2px;
				background: var(--border);
				transform: translateX(-50%)
			}

.tl-item {
				position: relative;
				width: 50%;
				padding: 0 44px 44px 0
			}

.tl-item:last-child {
				padding-bottom: 0
			}

.tl-item:nth-child(even) {
				left: 50%;
				padding: 0 0 44px 44px
			}

.tl-dot {
				position: absolute;
				top: 8px;
				right: -8px;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background: #fff;
				border: 3px solid var(--accent);
				box-shadow: 0 0 0 4px var(--accent-light);
				z-index: 1
			}

.tl-item:nth-child(even) .tl-dot {
				right: auto;
				left: -8px
			}

.tl-year {
				font-family: var(--font-display);
				font-size: 1.35rem;
				font-weight: 800;
				letter-spacing: -.02em;
				color: var(--accent);
				margin-bottom: 8px
			}

.tl-card {
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 14px;
				padding: 20px 22px;
				transition: transform .3s, box-shadow .3s, border-color .3s
			}

.tl-card:hover {
				transform: translateY(-3px);
				border-color: oklch(80% .05 265);
				box-shadow: 0 12px 30px -12px oklch(60% .18 250 / .2)
			}

.tl-card h4 {
				font-family: var(--font-display);
				font-size: 1.02rem;
				font-weight: 700;
				margin-bottom: 6px
			}

.tl-card p {
				font-size: .86rem;
				line-height: 1.7;
				color: var(--fg-soft)
			}

/* ===== ORGANIZATION ===== */
.org {
				background: #fafbfc
			}

.org-head {
				max-width: 700px;
				margin-bottom: 44px
			}

.org-head p {
				font-size: .96rem;
				color: var(--fg-soft);
				line-height: 1.8
			}

.org-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 18px
			}

.org-card {
				display: flex;
				align-items: flex-start;
				gap: 16px;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 14px;
				padding: 24px;
				transition: transform .3s, box-shadow .3s, border-color .3s
			}

.org-card:hover {
				transform: translateY(-3px);
				border-color: oklch(80% .05 265);
				box-shadow: 0 12px 30px -12px oklch(60% .18 250 / .18)
			}

.org-num {
				flex-shrink: 0;
				font-family: var(--font-display);
				font-size: .8rem;
				font-weight: 800;
				letter-spacing: .04em;
				color: var(--accent);
				background: var(--accent-light);
				border-radius: 10px;
				padding: 7px 11px;
				line-height: 1
			}

.org-card h4 {
				font-family: var(--font-display);
				font-size: 1.02rem;
				font-weight: 700;
				margin-bottom: 4px
			}

.org-card p {
				font-size: .84rem;
				line-height: 1.65;
				color: var(--fg-soft)
			}

/* ===== CTA BAND ===== */
.cta-band {
				padding: 40px 0 110px;
				background: #fafbfc
			}

/* --- Right content column --- */
.content-head {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				gap: 20px;
				padding-bottom: 16px;
				border-bottom: 1px solid var(--border);
				margin-bottom: 32px
			}

/* --- Rich text fallback (CMS editor output) --- */
.rich-body {
				font-size: 1.02rem;
				line-height: 2;
				color: var(--fg-soft)
			}



.rich-body h2 {
				font-family: var(--font-display);
				font-size: 1.45rem;
				font-weight: 700;
				color: var(--fg);
				margin: 2em 0 .85em
			}

.rich-body h3 {
				font-family: var(--font-display);
				font-size: 1.2rem;
				font-weight: 700;
				color: var(--fg);
				margin: 1.7em 0 .75em
			}

.rich-body h4 {
				font-size: 1.05rem;
				font-weight: 700;
				color: var(--fg);
				margin: 1.5em 0 .7em
			}

.rich-body strong,
			.rich-body b {
				color: var(--fg);
				font-weight: 600
			}

.rich-body img {
				max-width: 100% !important;
				height: auto !important;
				border-radius: 12px;
				margin: 10px auto 24px
			}

.rich-body ul,
			.rich-body ol {
				margin: 0 0 1.25em;
				padding-left: 1.7em
			}

.rich-body li {
				margin-bottom: .5em
			}

.rich-body ul li::marker {
				color: var(--accent)
			}

.rich-body ol li::marker {
				color: var(--accent);
				font-weight: 600
			}

.rich-body table {
				width: 100%;
				border-collapse: collapse;
				margin: 1.4em 0;
				font-size: .95rem;
				line-height: 1.6
			}

.rich-body th,
			.rich-body td {
				border: 1px solid var(--border);
				padding: 12px 16px;
				text-align: left;
				vertical-align: top
			}

.rich-body th {
				background: oklch(96% 0.015 265);
				color: var(--fg);
				font-weight: 600;
				white-space: nowrap
			}

.rich-body tbody tr:nth-child(even) td {
				background: oklch(98.5% 0.006 265)
			}

.rich-body blockquote {
				margin: 1.5em 0;
				padding: 18px 26px;
				background: oklch(97% 0.012 265);
				border-left: 4px solid var(--accent);
				border-radius: 0 12px 12px 0;
				color: var(--fg-soft)
			}

.rich-body blockquote p:last-child {
				margin-bottom: 0
			}

.rich-body a {
				color: var(--accent);
				text-decoration: underline;
				text-underline-offset: 3px
			}

.rich-body hr {
				border: none;
				border-top: 1px solid var(--border);
				margin: 2.2em 0
			}

/* ============================================================
   NEWS LIST PAGE
   ============================================================ */

/* ===== NEWS LIST PAGE ===== */
.news-page {
				background: var(--bg)
			}

/* Featured card image */
.fc-img {
				position: relative;
				min-height: 320px;
				overflow: hidden
			}

.fc-img img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .6s ease
			}

.fc-img .fc-flag {
				position: absolute;
				top: 16px;
				left: 16px;
				padding: 6px 14px;
				border-radius: 999px;
				background: rgba(0, 0, 0, .55);
				color: #fff;
				font-size: .66rem;
				font-weight: 700;
				letter-spacing: .12em;
				text-transform: uppercase;
				backdrop-filter: blur(6px);
				z-index: 2
			}

/* Scoped: faculty page shares .fc-body / .empty-state class names with different styles */
.page-news .fc-body {
				padding: 44px 42px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 16px
			}

.page-news .empty-state {
				display: none;
				text-align: center;
				padding: 80px 24px;
				border: 1.5px dashed var(--border);
				border-radius: var(--radius);
				color: var(--muted)
			}

/* Filter tabs with sliding indicator */
.filter-bar {
				display: flex;
				align-items: stretch;
				gap: 0;
				border-bottom: 1px solid var(--border);
				position: relative;
				margin-bottom: 44px;
				overflow-x: auto;
				scrollbar-width: none
			}

.filter-bar::-webkit-scrollbar {
				display: none
			}

.filter-btn {
				padding: 0 22px 16px;
				font-family: var(--font-display);
				font-size: 1.05rem;
				font-weight: 700;
				color: var(--muted);
				background: none;
				border: none;
				cursor: pointer;
				white-space: nowrap;
				transition: color .35s cubic-bezier(.16, 1, .3, 1);
				position: relative
			}

.filter-btn:hover {
				color: var(--fg)
			}

.filter-btn.active {
				color: var(--fg);
				font-weight: 800
			}

.filter-indicator {
				position: absolute;
				bottom: 0;
				height: 3px;
				background: var(--accent);
				border-radius: 3px 3px 0 0;
				transition: left .4s cubic-bezier(.16, 1, .3, 1), width .4s cubic-bezier(.16, 1, .3, 1)
			}

/* Featured card — horizontal split */
.featured-card {
				display: grid;
				grid-template-columns: 1.05fr 1fr;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 18px;
				overflow: hidden;
				margin-bottom: 48px;
				transition: box-shadow .35s, transform .35s, opacity .4s ease
			}

.featured-card:hover {
				box-shadow: 0 14px 44px -12px oklch(0% 0 0 / 0.12);
				transform: translateY(-3px)
			}

.featured-card.hidden,
			.news-card.hidden {
				display: none
			}

.featured-card:hover .fc-img img {
				transform: scale(1.05)
			}

.n-meta {
				display: flex;
				align-items: center;
				gap: 12px
			}

.n-tag {
				font-size: .72rem;
				font-weight: 700;
				letter-spacing: .04em;
				text-transform: uppercase;
				color: var(--accent)
			}

.n-date {
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: .78rem;
				color: var(--muted);
				font-weight: 500
			}

.n-date svg {
				width: 14px;
				height: 14px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round
			}

.featured-card h2 {
				font-family: var(--font-display);
				font-size: clamp(1.4rem, 2.4vw, 1.9rem);
				font-weight: 800;
				letter-spacing: -.02em;
				line-height: 1.22
			}

.featured-card h2 a {
				color: inherit
			}

.featured-card h2 a:hover {
				color: var(--accent);
				opacity: 1
			}

.featured-card .n-desc {
				font-size: .95rem;
				line-height: 1.7;
				color: var(--fg-soft);
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden
			}

.n-more {
				align-self: flex-start;
				display: inline-flex;
				align-items: center;
				gap: 6px;
				font-size: .88rem;
				font-weight: 700;
				color: var(--accent)
			}

.n-more svg {
				width: 15px;
				height: 15px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
				transition: transform .25s
			}

.n-more:hover svg {
				transform: translateX(4px)
			}

/* News grid */
.news-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 26px;
				transition: opacity .3s ease
			}

.news-grid.is-filtering {
				opacity: 0
			}

.news-card {
				background: #fff;
				border: 1px solid var(--border);
				border-radius: var(--radius);
				overflow: hidden;
				display: flex;
				flex-direction: column;
				transition: box-shadow .35s, transform .35s
			}

.news-card:hover {
				box-shadow: 0 12px 36px -10px oklch(0% 0 0 / 0.1);
				transform: translateY(-4px)
			}

.nc-img {
				height: 200px;
				overflow: hidden;
				position: relative
			}

.nc-img img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .55s ease
			}

.news-card:hover .nc-img img {
				transform: scale(1.06)
			}

.nc-body {
				padding: 22px 22px 24px;
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 10px
			}

.nc-title {
				font-family: var(--font-display);
				font-size: 1.06rem;
				font-weight: 800;
				letter-spacing: -.015em;
				line-height: 1.35;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden
			}

.nc-title a {
				color: inherit
			}

.nc-title a:hover {
				color: var(--accent);
				opacity: 1
			}

.nc-desc {
				font-size: .87rem;
				line-height: 1.65;
				color: var(--fg-soft);
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden
			}

.nc-more {
				margin-top: auto;
				padding-top: 6px;
				display: inline-flex;
				align-items: center;
				gap: 6px;
				font-size: .84rem;
				font-weight: 700;
				color: var(--accent)
			}

.nc-more svg {
				width: 14px;
				height: 14px;
				stroke: currentColor;
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
				transition: transform .25s
			}

.news-card:hover .nc-more svg {
				transform: translateX(4px)
			}

/* Announcements */
.announcements {
				background: #fafbfc
			}

.ann-head {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				gap: 20px;
				margin-bottom: 34px
			}

.ann-list {
				display: flex;
				flex-direction: column;
				gap: 12px;
				max-width: 980px
			}

.ann-item {
				display: flex;
				align-items: center;
				gap: 24px;
				background: #fff;
				border: 1px solid var(--border);
				border-radius: 14px;
				padding: 18px 26px 18px 20px;
				transition: transform .3s, box-shadow .3s, border-color .3s
			}

.ann-item:hover {
				transform: translateY(-2px);
				border-color: oklch(80% .05 265);
				box-shadow: 0 12px 30px -12px oklch(60% .18 250 / .18)
			}

.ann-date {
				flex-shrink: 0;
				text-align: center;
				background: var(--accent-light);
				border-radius: 12px;
				padding: 10px 0;
				width: 76px
			}

.ann-date b {
				display: block;
				font-family: var(--font-display);
				font-size: 1.35rem;
				font-weight: 800;
				line-height: 1.1;
				color: var(--accent)
			}

.ann-date span {
				font-size: .6rem;
				font-weight: 700;
				letter-spacing: .12em;
				text-transform: uppercase;
				color: var(--accent-2)
			}

.ann-body {
				flex: 1;
				min-width: 0
			}

.ann-body h4 {
				font-size: .96rem;
				font-weight: 700;
				line-height: 1.5;
				margin-bottom: 2px
			}

.ann-item:hover .ann-body h4 {
				color: var(--accent)
			}

.ann-body span {
				font-size: .78rem;
				color: var(--muted)
			}

.ann-arrow {
				flex-shrink: 0;
				width: 18px;
				height: 18px;
				stroke: var(--muted);
				fill: none;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
				transition: stroke .25s, transform .25s
			}

.ann-item:hover .ann-arrow {
				stroke: var(--accent);
				transform: translateX(3px)
			}

/* Pagination */
.pagination {
				display: flex;
				gap: 8px;
				justify-content: center;
				margin-top: 56px
			}

.pg-btn {
				min-width: 44px;
				height: 44px;
				padding: 0 16px;
				border-radius: 12px;
				border: 1px solid var(--border);
				background: #fff;
				color: var(--fg-soft);
				font-family: var(--font-body);
				font-size: .9rem;
				font-weight: 600;
				cursor: pointer;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				transition: all .25s
			}

.pg-btn.active {
				background: var(--accent);
				border-color: var(--accent);
				color: #fff;
				box-shadow: 0 6px 16px -6px oklch(60% .18 250 / .5)
			}

.pg-btn:hover:not(.active):not(:disabled) {
				border-color: var(--accent);
				color: var(--accent)
			}

.pg-btn:disabled {
				opacity: .4;
				cursor: default
			}

/* --- Right content column --- */
.content-head {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				gap: 20px;
				padding-bottom: 16px;
				border-bottom: 1px solid var(--border);
				margin-bottom: 10px
			}

/* --- CMS template news list (date above, title below) --- */
.news-list {
				list-style: none;
				padding: 0;
				margin: 0
			}

.news-list li {
				border-bottom: 1px solid var(--border);
				transition: border-color .22s
			}

.news-list li:hover {
				border-color: var(--accent)
			}

.news-list a {
				display: flex;
				flex-direction: column;
				gap: 7px;
				padding: 20px 10px;
				transition: padding-left .28s ease
			}

.news-list a:hover {
				opacity: 1;
				padding-left: 20px
			}

/* 日期在上（HTML 中 title 在前，用 order 调整，博达模板无需关心顺序） */
.news-list .nl-date {
				order: -1;
				flex: none;
				font-size: .84rem;
				letter-spacing: .04em;
				color: var(--muted);
				font-variant-numeric: tabular-nums;
				transition: color .22s
			}

.news-list .nl-title {
				flex: none;
				font-size: 1.05rem;
				font-weight: 600;
				color: var(--fg);
				line-height: 1.55;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				transition: color .22s
			}

.news-list a:hover .nl-title,
			.news-list a:hover .nl-date {
				color: var(--accent)
			}

/* ============================================================
   FACULTY DIRECTORY PAGE
   ============================================================ */

/* ===== FACULTY DIRECTORY ===== */
.directory {
				background: var(--bg)
			}

/* Filter section: by letter / department / title */
.filter-section {
				background: #fff;
				padding: 30px;
				margin-bottom: 30px;
				border-radius: 8px;
			}

.filter-row {
				display: flex;
				align-items: flex-start;
				column-gap: 24px;
				margin-bottom: 18px;
			}

.filter-row:last-child {
				margin-bottom: 0;
			}

.filter-label {
				padding-top: 8px;
				font-size: 16px;
				font-weight: 600;
				color: #333;
				min-width: 120px;
				flex-shrink: 0;
			}

.filter-options {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
			}

.filter-btn {
				padding: 8px 18px;
				border: 1px solid #e0e0e0;
				background: #fff;
				color: #666;
				font-size: 14px;
				font-family: var(--font-body);
				cursor: pointer;
				border-radius: 4px;
				transition: all 0.3s ease;
			}

.filter-btn:hover {
				border-color: #236593;
				color: #236593;
			}

.filter-btn.active {
				background: #236593;
				color: white;
				border-color: #236593;
			}

.filter-btn:disabled {
				background: #f5f5f5;
				color: #ccc;
				border-color: #e0e0e0;
				cursor: not-allowed;
				opacity: 0.6;
			}

.filter-btn:disabled:hover {
				background: #f5f5f5;
				color: #ccc;
				border-color: #e0e0e0;
			}

/* Faculty grid: 2-column cards */
.faculty-grid {
				padding: 0 30px;
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 24px;
			}

.faculty-card {
				background: #fff;
				padding: 28px 28px 24px;
				border-radius: 4px;
				display: flex;
				gap: 24px;
				transition: box-shadow 0.3s ease, transform 0.3s ease;
				box-shadow: 0 2px 8px rgba(35, 101, 147, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
				position: relative;
			}

.faculty-card.hidden {
				display: none;
			}

.faculty-card > a {
				display: flex;
				gap: 24px;
				text-decoration: none;
				color: inherit;
				width: 100%;
			}

.faculty-card::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 28px;
				height: 28px;
				border-top: 2px solid #236593;
				border-left: 2px solid #236593;
				opacity: 0.5;
				transition: opacity 0.3s ease;
			}

.faculty-card:hover {
				box-shadow: 0 12px 36px rgba(35, 101, 147, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
				transform: translateY(-4px);
			}

.faculty-card:hover::before {
				opacity: 1;
			}

.faculty-photo {
				width: 120px;
				height: 155px;
				object-fit: cover;
				border-radius: 2px;
				flex-shrink: 0;
				background: #f0f2f4;
			}

.faculty-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-top: 2px;
				min-width: 0;
			}

.faculty-name {
				font-size: 19px;
				font-weight: 700;
				color: #222;
				margin-bottom: 6px;
				letter-spacing: 0.5px;
			}

.info-item {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 13px;
				color: #555;
				line-height: 2;
				min-width: 0;
			}

.info-label {
				color: #999;
				min-width: 80px;
				flex-shrink: 0;
			}

.info-value {
				color: #444;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 1;
				min-width: 0;
			}

/* Empty state */
.empty-state {
				display: none;
				text-align: center;
				padding: 90px 24px;
				border: 1.5px dashed var(--border);
				border-radius: var(--radius);
				color: var(--muted)
			}

.empty-state.show {
				display: block
			}

.empty-state svg {
				width: 44px;
				height: 44px;
				stroke: var(--border);
				fill: none;
				stroke-width: 1.6;
				margin: 0 auto 16px
			}

.empty-state b {
				display: block;
				font-family: var(--font-display);
				font-size: 1.1rem;
				font-weight: 700;
				color: var(--fg-soft);
				margin-bottom: 4px
			}

.empty-state p {
				font-size: .88rem
			}

.empty-state .reset-link {
				display: inline-flex;
				margin-top: 14px;
				padding: 9px 20px;
				border-radius: 999px;
				border: 1px solid var(--border);
				background: #fff;
				font-size: .82rem;
				font-weight: 600;
				color: var(--accent);
				cursor: pointer;
				transition: all .25s
			}

.empty-state .reset-link:hover {
				border-color: var(--accent)
			}

/* ===== JOIN CTA ===== */
.join {
				background: #fafbfc;
				padding-bottom: 110px
			}

/* --- Right content column --- */
.content-head {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				gap: 20px;
				padding-bottom: 16px;
				border-bottom: 1px solid var(--border);
				margin-bottom: 28px
			}

/* ===== ABOUT PAGE — RESPONSIVE ADDITIONS ===== */

@media(max-width:1100px) {
	.values-grid {
						grid-template-columns: 1fr 1fr
					}
.org-grid {
						grid-template-columns: 1fr 1fr
					}
.dean-grid {
						gap: 36px
					}
}

@media(max-width:960px) {
	.page-hero {
						padding: 156px 0 76px
					}
.intro {
						padding: 84px 0
					}
.intro-grid {
						grid-template-columns: 1fr;
						gap: 32px
					}
.intro-media {
						min-height: 380px;
						order: -1
					}
.dean-grid {
						grid-template-columns: 1fr
					}
.dean-media {
						min-height: 400px
					}
.cta-panel {
						grid-template-columns: 1fr;
						padding: 48px 36px
					}
	}

@media(max-width:600px) {
	.page-hero {
						padding: 132px 0 60px
					}
.ph-ghost {
						font-size: 7rem;
						-webkit-text-stroke-width: 1px
					}
.values-grid,
					.org-grid {
						grid-template-columns: 1fr
					}
.timeline::before {
						left: 8px;
						transform: none
					}
.tl-item,
					.tl-item:nth-child(even) {
						width: 100%;
						left: 0;
						padding: 0 0 32px 36px
					}
.tl-dot,
					.tl-item:nth-child(even) .tl-dot {
						left: 2px;
						right: auto
					}
.cta-panel {
						padding: 40px 26px
					}
	}

@media (max-width: 991px) {
	.page-layout {
						grid-template-columns: minmax(0, 1fr);
						gap: 28px
					}
.side-menu {
						position: static
					}
.side-cat {
						padding: 16px 20px;
						font-size: 1.02rem
					}
.side-nav {
						flex-direction: row;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;
						scrollbar-width: none
					}
.side-nav::-webkit-scrollbar {
						display: none
					}
.side-nav a {
						flex: none;
						padding: 12px 18px;
						border-bottom: none;
						white-space: nowrap
					}
.side-nav a:hover {
						padding-left: 18px
					}
.side-nav a svg {
						display: none
					}
.content-head {
						flex-direction: column;
						gap: 8px
					}
/* CMS editor tables: scroll instead of breaking layout */
	.rich-body table {
						display: block;
						width: max-content;
						max-width: 100%;
						overflow-x: auto
					}
.rich-body th {
						white-space: normal
					}
}

/* ===== NEWS PAGE — RESPONSIVE ADDITIONS ===== */

@media(max-width:1100px) {
	.news-grid {
						grid-template-columns: 1fr 1fr
					}
.featured-card {
						grid-template-columns: 1fr
					}
.fc-img {
						min-height: 260px
					}
.page-news .fc-body {
						padding: 32px 28px
					}
}

@media(max-width:960px) {
	.page-hero {
						padding: 156px 0 76px
					}
.filter-btn {
						padding: 0 16px 12px;
						font-size: .95rem
					}
	}

@media(max-width:600px) {
	.page-hero {
						padding: 132px 0 60px
					}
.ph-ghost {
						font-size: 7rem;
						-webkit-text-stroke-width: 1px
					}
.news-grid {
						grid-template-columns: 1fr
					}
.filter-btn {
						padding: 0 14px 12px;
						font-size: .9rem
					}
.ann-item {
						padding: 16px 18px 16px 16px;
						gap: 16px
					}
	}

@media (max-width: 991px) {
	.page-layout {
						grid-template-columns: minmax(0, 1fr);
						gap: 28px
					}
.side-menu {
						position: static
					}
.side-cat {
						padding: 16px 20px;
						font-size: 1.02rem
					}
.side-nav {
						flex-direction: row;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;
						scrollbar-width: none
					}
.side-nav::-webkit-scrollbar {
						display: none
					}
.side-nav a {
						flex: none;
						padding: 12px 18px;
						border-bottom: none;
						white-space: nowrap
					}
.side-nav a:hover {
						padding-left: 18px
					}
.side-nav a svg {
						display: none
					}
.content-head {
						flex-direction: column;
						gap: 8px
					}
}

/* ===== FACULTY PAGE — RESPONSIVE ADDITIONS ===== */

@media(max-width:960px) {
	.page-hero {
						padding: 156px 0 76px
					}
.faculty-grid {
						grid-template-columns: minmax(0, 1fr);
						gap: 18px;
						padding: 0
					}
.filter-section {
						padding: 22px 20px
					}
.filter-label {
						min-width: 96px
					}
.cta-panel {
						grid-template-columns: 1fr;
						padding: 48px 36px
					}
	}

@media(max-width:600px) {
	.page-hero {
						padding: 132px 0 60px
					}
.ph-ghost {
						font-size: 7rem;
						-webkit-text-stroke-width: 1px
					}
.cta-panel {
						padding: 40px 26px
					}
.filter-section {
						padding: 18px 16px
					}
.filter-row {
						flex-direction: column;
						gap: 8px
					}
.filter-label {
						min-width: 0;
						padding-top: 0
					}
.faculty-card {
						padding: 20px 18px
					}
.faculty-card > a {
						gap: 16px
					}
.faculty-photo {
						width: 96px;
						height: 124px
					}
}

@media (max-width: 991px) {
	.page-layout {
						grid-template-columns: minmax(0, 1fr);
						gap: 28px
					}
.side-menu {
						position: static
					}
.side-cat {
						padding: 16px 20px;
						font-size: 1.02rem
					}
.side-nav {
						flex-direction: row;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;
						scrollbar-width: none
					}
.side-nav::-webkit-scrollbar {
						display: none
					}
.side-nav a {
						flex: none;
						padding: 12px 18px;
						border-bottom: none;
						white-space: nowrap
					}
.side-nav a:hover {
						padding-left: 18px
					}
.side-nav a svg {
						display: none
					}
.content-head {
						flex-direction: column;
						gap: 8px
					}
}


/* ============================================================
   PAGE-SCOPED OVERRIDES (body class per page)
   body.home = index / .page-about / .page-news / .page-faculty
   ============================================================ */

/* inner-page only: section rhythm at tablet, nav underline off, tighter container */
@media (max-width: 960px) {
	.page-about section,
	.page-news section,
	.page-faculty section {
		padding: 76px 0
	}

	.page-about .nav-links>li>a::after,
	.page-news .nav-links>li>a::after,
	.page-faculty .nav-links>li>a::after {
		display: none
	}
}

@media (max-width: 600px) {
	.page-about .container,
	.page-news .container,
	.page-faculty .container {
		padding: 0 20px
	}
}

/* section rhythm: index 112px, inner pages 96px */
.page-about section,
.page-news section,
.page-faculty section {
	padding: 96px 0
}

.page-about .about-stats {
	margin: 64px 0 0
}

.page-about .stat-card {
	padding: 24px 20px 20px
}

.page-about .stat-card .stat-num {
	font-size: 1.7rem
}

.page-news .content-head {
	margin-bottom: 10px
}

.page-faculty .content-head {
	margin-bottom: 28px
}

@media (max-width: 960px) {
	.page-about .about-stats {
		margin: 44px 0 0
	}
}

@media (max-width: 600px) {
	body.home section {
		padding: 70px 0
	}

	.page-about section,
	.page-news section,
	.page-faculty section {
		padding: 64px 0
	}

	.page-about .stat-card {
		padding: 16px 14px 14px;
		border-radius: 16px
	}

	.page-about .stat-card .stat-num {
		font-size: 1.45rem
	}
}

/* ============================================================
   ADMINISTRATIVE UNITS — list & detail
   ============================================================ */

.unit-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.unit-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 28px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.unit-item:hover {
	border-color: var(--accent);
	box-shadow: 0 10px 30px -12px rgba(35, 101, 147, .25);
	transform: translateY(-2px);
}

.unit-name {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--fg);
	line-height: 1.45;
	margin-bottom: 6px;
	transition: color .22s;
}

.unit-item:hover .unit-name {
	color: var(--accent);
}

.unit-desc {
	font-size: .9rem;
	color: var(--muted);
	line-height: 1.7;
}

.unit-arrow {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: all .25s;
}

.unit-item:hover .unit-arrow {
	opacity: 1;
	transform: none;
}

/* --- Unit detail: plain article (no sidebar) --- */
.article-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: .85rem;
	color: var(--muted);
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--border);
}

.back-wrap {
	display: flex;
	justify-content: center;
	padding: 8px 20px 64px;
}

.back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 230px;
	padding: 13px 32px;
	background: var(--accent);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 6px 18px -6px rgba(35, 101, 147, .45);
	transition: background .25s, transform .25s, box-shadow .25s;
}

.back-btn:hover {
	background: #2d7ab8;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -6px rgba(35, 101, 147, .5);
}

.back-btn svg {
	width: 17px;
	height: 17px;
	transition: transform .25s;
}

.back-btn:hover svg {
	transform: translateX(-3px);
}

@media (max-width: 600px) {
	.unit-item {
		padding: 20px 18px;
	}
}
/* --- Unit detail: article title & meta in hero --- */
.page-hero .ph-article-title {
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.18;
	max-width: 900px;
}

.ph-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin-top: 14px;
	font-size: .88rem;
	color: rgba(255, 255, 255, .72);
}

.ph-meta span + span {
	margin-left: 20px;
}

.ph-meta span + span::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	margin-right: 20px;
	vertical-align: middle;
}

.page-hero .ph-meta {
	opacity: 0;
	animation: heroUp .8s cubic-bezier(.16, 1, .3, 1) .3s forwards;
}
/* --- Unit detail: compact hero --- */
.page-hero.ph-compact {
	padding: 150px 0 54px;
}

@media (max-width: 960px) {
	.page-hero.ph-compact {
		padding: 128px 0 42px;
	}
}
/* ============================================================
   PHOTO GALLERY — 3x3 grid with FancyBox lightbox
   ============================================================ */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.photo-item {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.photo-item:hover {
	border-color: var(--accent);
	box-shadow: 0 10px 30px -12px rgba(35, 101, 147, .28);
	transform: translateY(-3px);
}

.photo-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.photo-name {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 14px;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--fg);
	text-align: center;
	transition: color .22s;
}

.photo-item:hover .photo-name {
	color: var(--accent);
}

@media (max-width: 720px) {
	.photo-grid {
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.photo-name {
		padding: 9px 10px;
		font-size: .8rem;
	}
}
/* ============================================================
   PAGINATION — Boda p_pages
   ============================================================ */

.p_pages {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
	font-size: .9rem;
}

.p_pages .p_no,
.p_pages .p_no_d,
.p_pages .p_fun,
.p_pages .p_fun_d {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--fg);
	transition: border-color .2s, color .2s, background .2s;
}

.p_pages .p_no a,
.p_pages .p_fun a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.p_pages .p_no:hover,
.p_pages .p_fun:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.p_pages .p_no_d {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.p_pages .p_first_d,.p_pages .p_first,
.p_pages .p_last, .p_pages .p_last_d {
	display: none;
}

.p_pages .p_fun_d {
	color: var(--muted);
	background: #f5f6f8;
	cursor: not-allowed;
	opacity: .6;
}