/* ==========================================================================
   site.css —— 1-Website 视觉设计系统（在 main.css 之后加载）
   --------------------------------------------------------------------------
   角色：main.css 保留 reset / 栅格 / 历史主题；本文件提供新的设计系统，
   并逐项覆盖历史主题（历史主题大量用 id 选择器，故此处统一加 `body` 前缀
   提高一级特异度，避免使用 !important）。

   约束（部署侧，勿违反）：
   - CSP: script-src 无 'unsafe-inline' ⇒ 不写内联 <script>；style-src 允许内联 <style>。
   - CSP: font-src 'self' data: ⇒ 不得引用 Google Fonts 等外部字体，
     因此这里只用系统字体栈（含中文字体），零网络请求、首屏不阻塞。
   - 不新增任何需要编译的依赖（纯 CSS + 原生 JS）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
	/* 墨色 / 文字 */
	--c-ink: #0d2b35;
	--c-ink-2: #28454f;
	--c-text: #4d6570;
	--c-muted: #7d9199;

	/* 面 / 线 */
	--c-bg: #f4f8fa;
	--c-surface: #ffffff;
	--c-line: #e3edf1;
	--c-line-soft: #eff5f7;

	/* 品牌（沿用实验室青蓝，但降低饱和、拉开明度层次） */
	--c-brand: #0b7d99;
	--c-brand-600: #0a6c85;
	--c-brand-700: #085a70;
	--c-brand-300: #5cc4dc;
	--c-brand-050: #f0f8fa;

	--grad-brand: linear-gradient(135deg, #083f52 0%, #0a6a86 46%, #0f93b1 100%);
	--grad-ink: linear-gradient(180deg, #0c2e39 0%, #09232c 100%);

	/* 圆角 / 阴影 */
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 16px;
	--r-pill: 999px;
	--sh-1: 0 1px 2px rgba(9, 40, 50, 0.05), 0 2px 6px rgba(9, 40, 50, 0.05);
	--sh-2: 0 2px 6px rgba(9, 40, 50, 0.06), 0 12px 26px rgba(9, 40, 50, 0.08);
	--sh-3: 0 8px 20px rgba(9, 40, 50, 0.08), 0 24px 48px rgba(9, 40, 50, 0.1);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hdr-h: 74px;

	/* 系统字体栈：拉丁优先用 Inter/Segoe，中文依次回落，避免渲染成本与 CSP 风险 */
	--font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system,
		BlinkMacSystemFont, "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
		"Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "微软雅黑",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-num: "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. 基础排版
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--c-bg);
	background-image:
		radial-gradient(1200px 520px at 12% -8%, rgba(92, 196, 220, 0.13), transparent 62%),
		radial-gradient(900px 420px at 96% 4%, rgba(11, 125, 153, 0.08), transparent 60%);
	background-repeat: no-repeat;
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.78;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
	color: var(--c-ink);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

h1 {
	font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.25rem);
}

h2 {
	position: relative;
	font-size: clamp(1.2rem, 1.1rem + 0.42vw, 1.45rem);
	padding-left: 17px;
	margin-bottom: 0.95em;
}

/* 标题前的竖向渐变条：整站统一的视觉锚点 */
h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.24em;
	bottom: 0.24em;
	width: 4px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--c-brand-300), var(--c-brand-700));
}

h3 {
	font-size: 1.1rem;
	color: var(--c-ink-2);
	margin-bottom: 0.45em;
}

h4 {
	font-size: 1rem;
	color: var(--c-ink-2);
	margin-bottom: 0.35em;
}

p {
	line-height: 1.95;
}

strong {
	color: var(--c-ink-2);
	font-weight: 600;
}

a {
	color: var(--c-brand);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

a:hover {
	color: var(--c-brand-700);
	text-decoration: none;
}

::selection {
	background: rgba(92, 196, 220, 0.35);
}

:focus-visible {
	outline: 2px solid var(--c-brand-300);
	outline-offset: 2px;
	border-radius: 6px;
}

.smaller-text {
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--c-muted);
}

img.left {
	float: left;
	margin: 3px 1.4em 0 0;
	border-radius: var(--r);
}

img.top {
	margin: 0 0 1.6rem;
	border-radius: var(--r);
}

img.small {
	max-width: 100%;
	width: auto;
	float: none;
	display: block;
	margin: 6px auto 0;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
}

footer.controls {
	margin-top: 22px;
}

/* --------------------------------------------------------------------------
   3. 版面节奏（覆盖历史 50px 栅格间距）
   -------------------------------------------------------------------------- */
body .main-row {
	margin-top: -24px;
	margin-left: -24px;
}

body .main-row > * {
	padding: 24px 0 0 24px;
}

/* 卡片内部的嵌套栅格收紧一档 */
body .main-row .row,
body #footer-wrapper .row {
	margin-top: -16px;
	margin-left: -16px;
}

body .main-row .row > *,
body #footer-wrapper .row > * {
	padding: 16px 0 0 16px;
}

/* --------------------------------------------------------------------------
   4. 卡片
   -------------------------------------------------------------------------- */
body #main {
	background: transparent;
	padding: clamp(38px, 4.4vw, 68px) 0 clamp(52px, 5vw, 84px);
}

body .main-row > * > section,
body .main-row > * > article {
	margin: 0;
	padding: clamp(22px, 2.1vw, 30px);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease),
		border-color 0.35s var(--ease);
}

body .main-row > * > section:hover,
body .main-row > * > article:hover {
	transform: translateY(-3px);
	border-color: #d6e6ec;
	box-shadow: var(--sh-2);
}

body .main-row > * > section > h2:first-child,
body .main-row > * > article > h2:first-child {
	margin-top: -2px;
}

/* 同一行的卡片等高：列本身已被 flex 拉伸，这里让卡片吃掉整列高度（否则底边参差，
   实测 1440 宽首行三卡 305/276/470px ⇒ 底边差近 200px，看着像排版事故）。
   卡片内部再做成纵向 flex，好让各自的“页脚动作”贴底。 */
body .main-row > * {
	display: flex;
	flex-direction: column;
}

body .main-row > * > section,
body .main-row > * > article {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 页脚动作（“了解更多 …”）贴到卡片底边：多出来的高度落在它上方，等于留白而非错位 */
body .main-row > * > section > footer.controls,
body .main-row > * > article > footer.controls {
	margin-top: auto;
	padding-top: 20px;
}

/* 动态列表卡：把“更多请访问...”钉在底边，充当这张卡的页脚 */
body #news-list {
	display: flex;
	flex-direction: column;
}

body #news-list > li.news-more {
	margin-top: auto;
}

/* 集体照卡（.team-photo-card）：原来用 `margin: auto 0` 让照片在余量里上下居中。
   2026-09-25 起改成「照片紧贴标题下方」—— 首行三卡的内容要在同一水平线上对齐，
   居中会让照片顶边随余量下移（照片缩到 78% 后余量变大，偏移更明显）。余量留在卡片底部。 */

/* 「欢迎来到BitLAB!」卡（.card-vcenter）：
   ① 上面那条通用规则 `body .main-row > * > section > h2:first-child { margin-top: -2px }`
      只作用于「h2 是卡片第一个子元素」的情形 —— 本卡的 h2 是直接子元素，而右侧两卡的 h2 包在 <a> 里，
      于是本卡标题比它们高 2px（实测 1440 下 22 vs 24px）。这里显式归零，三张卡标题顶部才一致。
   ② 正文**不做**「余量里上下居中」：首行三卡的内容要在同一条水平线上（实测三卡均为 69px），
      居中会把正文压到 97px、与右边两卡错开（这是用户报的「内容没对齐」）。余量留在卡底（等高卡片的正常现象）。 */
body .main-row > .card-vcenter > section > h2:first-child {
	margin-top: 0;
}

/* 首页首行三卡（欢迎来到BitLAB! / 科研团队 / 最新动态）再压一档高度。
   这行的高度由两张卡共同决定：【欢迎】卡的四行正文与【最新动态】卡的五条列表，
   只收紧其中一张看不出效果（另一张会顶回来），所以下面两类都改。
   实测 1440 宽：卡高 344 → 280px。 */
body .main-row > .card-compact > section {
	padding: clamp(18px, 1.6vw, 24px);
}

body .card-compact > section > h2:first-child,
body .card-compact > section > a:first-child h2 {
	margin-bottom: 14px;
}

body .card-compact > section p {
	margin-bottom: 16px;
	line-height: 1.75;
}

body .card-compact > section > footer.controls {
	padding-top: 14px;
}

/* 卡内列表不留“列表尾距”（否则卡片底部会多出一段看不见的空白） */
body .card-compact ul.link-list {
	margin-bottom: 0;
}

/* 动态行距与「主要成员」卡看齐：行高 32px */
body .card-compact ul.link-list.news-compact > li {
	padding: 5px 12px;
	line-height: 1.4;
}

/* 卡片里最后一个元素不留多余下边距 */
body .main-row > * > section > *:last-child,
body .main-row > * > article > *:last-child {
	margin-bottom: 0;
}

/* 列表页：卡片交给侧栏与正文，各成一格 */
body.list-page .main-row > * > section {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

body.list-page .main-row > * > section:hover {
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. 页头（内页）
   -------------------------------------------------------------------------- */
body #header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 0;
	background: rgba(255, 255, 255, 0.88);
	background-image: none;
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(13, 43, 53, 0.07);
	transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

body.is-scrolled #header-wrapper {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 24px rgba(9, 40, 50, 0.07);
}

body #header-wrapper .row,
body #banner .header-wrap .row {
	margin: 0;
}

body #header-wrapper .row > *,
body #banner .header-wrap .row > * {
	padding: 0;
}

/* 页头本体（内页与首页共用同一套外观，靠 --hdr-* 变量切换前景色） */
body #header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: var(--hdr-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

body #header h1 {
	position: static;
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	margin: 0;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--hdr-fg, var(--c-ink));
}

body #header h1 img {
	display: block;
	float: none;
	max-height: 44px;
	width: auto;
	margin: 0;
	padding: 0;
	/* 圆角是给内页那张 logo2.jpg（JPEG 带浅色底，靠圆角削去硬边）留的；
	   首页用的是透明字标 images/logo-mark.png，圆角对它无影响。 */
	border-radius: 8px;
}

body #header nav {
	position: static;
	display: flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

body #header nav a {
	display: inline-block;
	padding: 9px 16px;
	color: var(--hdr-fg, var(--c-ink-2));
	font-weight: 500;
	border-radius: var(--r-pill);
	background-image: none;
	background-color: transparent;
	box-shadow: none;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

body #header nav a:hover {
	background-color: var(--hdr-hover, rgba(11, 125, 153, 0.09));
	background-image: none;
	color: var(--hdr-hover-fg, var(--c-brand-600));
	box-shadow: none;
}

body #header nav a.current-page-item {
	background-image: var(--grad-brand);
	background-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px rgba(9, 90, 112, 0.26);
}

body #header nav a.current-page-item:hover {
	color: #fff;
	filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   6. 内页页首（色带标题条）
   -------------------------------------------------------------------------- */
body .page-hero {
	position: relative;
	overflow: hidden;
	/* 色带内只有一行标题，上下内距取同值即可得到匀称的标题条 */
	padding: clamp(30px, 3.4vw, 48px) 0;
	background: var(--grad-brand);
	color: #fff;
}

body .page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(760px 300px at 88% -30%, rgba(255, 255, 255, 0.22), transparent 62%),
		radial-gradient(620px 260px at 4% 130%, rgba(92, 196, 220, 0.34), transparent 66%),
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035) 0 1px,
			transparent 1px 12px
		);
}

body .page-hero .container {
	position: relative;
	z-index: 1;
}

body .page-hero h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.05rem);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. 首页首屏
   -------------------------------------------------------------------------- */
body #banner {
	position: relative;
	width: 100%;
	height: clamp(430px, 60vh, 650px);
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background-color: #08222b;
	background-image: none;
	box-shadow: none;
	overflow: hidden;
	text-align: left;
}

body #banner .banner-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

body #banner .banner-slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s var(--ease);
	pointer-events: none;
}

body #banner .banner-slide.active {
	opacity: 1;
	pointer-events: auto;
}

body #banner .banner-slide img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	body #banner .banner-slide.active img {
		animation: bnr-zoom 10s var(--ease) both;
	}
}

@keyframes bnr-zoom {
	from {
		transform: scale(1.06);
	}
	to {
		transform: scale(1);
	}
}

body #banner .banner-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* 压暗四档（2026-09-26 由 0.60/0.16/0.34/0.80 调轻）：
	   原图平均亮度 148/255，旧蒙版把它压到 96（-35%），顶部只剩 46%、底部 41%，整体发闷。
	   现值 0.34/0.10/0.22/0.52 ⇒ 合成后平均 114（-23%），顶部 97、底部 91：
	   顶部仍够白字导航（页头自己还有一条 0.52→0 的深青渐变），底部仍能把白卡托起来。 */
	background-image: linear-gradient(
		180deg,
		rgba(6, 32, 43, 0.34) 0%,
		rgba(6, 32, 43, 0.1) 32%,
		rgba(6, 32, 43, 0.22) 62%,
		rgba(6, 32, 43, 0.52) 100%
	);
}

/* 首屏下方的介绍卡：向上叠压首屏底部，承载 h1 与主 CTA
   （三张 banner 都自带大量画面信息，故不把标题压在图上传字） */
body .hero-intro {
	position: relative;
	z-index: 3;
	margin-top: -78px;
}

body .hero-card {
	max-width: 780px;
	padding: clamp(24px, 2.3vw, 34px) clamp(22px, 2.6vw, 38px);
	background: linear-gradient(150deg, #ffffff 0%, #f6fafb 100%);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 20px;
	box-shadow: 0 20px 46px rgba(4, 24, 32, 0.2), 0 2px 6px rgba(4, 24, 32, 0.08);
}

body .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 5px 14px;
	border-radius: var(--r-pill);
	background: var(--c-brand-050);
	color: var(--c-brand-600);
	font-size: 0.79rem;
	letter-spacing: 0.12em;
	line-height: 1.5;
}

body .hero-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-brand);
	box-shadow: 0 0 0 3px rgba(11, 125, 153, 0.15);
}

body .hero-card h1 {
	margin: 0 0 12px;
	color: var(--c-ink);
	font-size: clamp(1.42rem, 1.05rem + 1.45vw, 2.1rem);
	font-weight: 600;
	line-height: 1.3;
}

body .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body #banner .banner-controls {
	/* 定位/布局骨架原本在 main.css 的旧主题里（已删）⇒ 这里必须自带，
	   否则轮播点会掉回文档流、跑到首屏图上面去（实测 geometry 大幅漂移）。 */
	position: absolute;
	display: flex;
	justify-content: center;
	pointer-events: auto;
	z-index: 2;
	top: 50%;
	right: clamp(16px, 2.6vw, 34px);
	bottom: auto;
	left: auto;
	transform: translateY(-50%);
	flex-direction: column;
	gap: 9px;
	padding: 9px 7px;
	border-radius: var(--r-pill);
	background: rgba(6, 32, 43, 0.26);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body .banner-dot {
	width: 5px;
	height: 26px;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.42);
	box-shadow: 0 0 0 1px rgba(4, 24, 32, 0.12);
	cursor: pointer;
	transition: height 0.3s var(--ease), background-color 0.3s var(--ease);
}

body .banner-dot.active {
	height: 46px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(4, 24, 32, 0.12), 0 2px 8px rgba(4, 24, 32, 0.2);
}

body .banner-dot:hover,
body .banner-dot:focus-visible {
	background: rgba(255, 255, 255, 0.8);
}

/* 首页页头：固定在首屏之上；滚动后（去掉 .hero-mode）变成毛玻璃白底。
   默认（无 JS）为毛玻璃白底 ⇒ 任何情况下都可读。 */
body #banner .header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(13, 43, 53, 0.07);
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
}

body.hero-mode #banner .header-wrap {
	background: linear-gradient(
		180deg,
		rgba(6, 32, 43, 0.52) 0%,
		rgba(6, 32, 43, 0.24) 62%,
		rgba(6, 32, 43, 0) 100%
	);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

body.hero-mode #header {
	--hdr-fg: #fff;
	--hdr-hover: rgba(255, 255, 255, 0.18);
	--hdr-hover-fg: #fff;
}

body.hero-mode #header h1 img {
	/* 只有首页会进 hero-mode（site.js 要求页面存在 #banner .header-wrap）。
	   首页字标是透明 PNG（images/logo-mark.png，「青色 bit + 灰色手绘 LAB」）：
	   brightness(0) 先把彩色压成黑、invert(1) 再反成白，alpha 不受影响
	   ⇒ 深色带上是「白 bit + 浅灰 LAB」，与浅底上的原色层次一致。
	   内页用的 logo2.jpg 不会进这个分支，故不受影响。 */
	filter: brightness(0) invert(1);
}

body.is-scrolled #banner .header-wrap:not(.never),
body.hero-mode.is-scrolled #banner .header-wrap {
	box-shadow: 0 6px 24px rgba(9, 40, 50, 0.07);
}

/* --------------------------------------------------------------------------
   8. 按钮
   -------------------------------------------------------------------------- */
body .button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 11px 24px;
	border: 0;
	border-radius: var(--r-pill);
	background-color: transparent;
	background-image: var(--grad-brand);
	color: #fff;
	font-size: 0.96rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	box-shadow: 0 6px 18px rgba(9, 90, 112, 0.24);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
		filter 0.25s var(--ease), background-color 0.25s var(--ease);
}

body .button:hover {
	transform: translateY(-2px);
	background-image: var(--grad-brand);
	color: #fff;
	filter: brightness(1.06) saturate(1.06);
	box-shadow: 0 10px 26px rgba(9, 90, 112, 0.3);
}

body .button:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(9, 90, 112, 0.24);
}

body .button.light {
	background-image: none;
	background-color: #fff;
	color: var(--c-brand-700);
	box-shadow: 0 8px 24px rgba(4, 24, 32, 0.26);
}

body .button.light:hover {
	background-color: #fff;
	color: var(--c-brand);
}

body .button.ghost {
	background-image: none;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.42);
	color: #fff;
	box-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body .button.ghost:hover {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.9);
	color: #fff;
}

body .button.ghost-dark {
	background-image: none;
	background-color: transparent;
	border: 1px solid var(--c-line);
	color: var(--c-ink-2);
	box-shadow: none;
}

body .button.ghost-dark:hover {
	background-color: rgba(11, 125, 153, 0.06);
	border-color: var(--c-brand-300);
	color: var(--c-brand-600);
}

/* --------------------------------------------------------------------------
   9. 链接列表 / 动态 / 卡片内图片
   -------------------------------------------------------------------------- */
body ul.link-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	margin: 0;
	border-top: 1px solid var(--c-line-soft);
	border-radius: 10px;
	transition: background-color 0.22s var(--ease);
}

body ul.link-list li:first-child {
	padding-top: 11px;
	margin-top: 0;
	border-top: 0;
}

body ul.link-list li:hover {
	background-color: var(--c-brand-050);
}

body ul.link-list li > a {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--c-ink-2);
	font-size: 0.95rem;
	/* ⚠️ 这里**不**做单行截断：通用列表含页脚「合作伙伴」的单位名，
	   截断会丢字（实测 1100px 时“浙江省急救指挥中心”→“…中…”）。
	   需要单行截断的只有首页「最新动态」那张卡（见 .news-compact）。 */
}

body ul.link-list li a:hover,
body ul.link-list li a:active {
	color: var(--c-brand-600);
}

body ul.link-list li a.is-active {
	color: var(--c-brand-600);
	font-weight: 600;
}

body ul.link-list li .link-date {
	flex: 0 0 auto;
	margin-left: 1rem;
	color: var(--c-muted);
	font-size: 0.84rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 首页「最新动态」紧凑版：行更密 + 单行截断 ⇒ 把整卡（进而整行）高度压下来 */
body ul.link-list.news-compact > li {
	gap: 10px;
	padding: 7px 14px;
}

body ul.link-list.news-compact > li > a {
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body ul.link-list.news-compact > li .link-date {
	margin-left: 8px;
	font-size: 0.8rem;
}

body ul.link-list li.news-more {
	justify-content: flex-start;
	padding: 10px 14px 4px;
	border-top: 1px dashed var(--c-line);
	color: var(--c-muted);
	font-size: 0.85rem;
}

body #news-list li,
body #news-list li a,
body #news-list li a:visited,
body #news-list li a:hover,
body #news-list li a:active,
body #news-list li.news-more,
body #news-list li span {
	color: var(--c-ink-2);
}

body #news-list li a:hover,
body #news-list li a.is-active {
	color: var(--c-brand-600);
}

body #news-list li:has(a.is-active) {
	background-color: var(--c-brand-050);
}

/* news.html 左栏「最近动态」：标题单行截断（太长就省略号），日期列不参与压缩。
   ⚠️ 只写 #news-list（全站仅 news.html 有）：通用 ul.link-list 里含页脚「合作伙伴」的
   单位名，那里截断会丢字。悬停可看全称（main.js 渲染时写了 title 属性）。 */
body #news-list li > a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body .news-date {
	margin: -0.4em 0 1em;
	color: var(--c-muted);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

/* 成果卡：position:relative 是结构性属性（main.css 瘦身时从旧主题搬过来的），别删 —— 
   它给卡片内的绝对定位元素（气泡/徽标等）提供包含块 */
body article.blog-post {
	position: relative;
}

/* 成果卡片里的“6 最新成果”气泡：已挪到卡片底部、「了解更多」上方并靠右（见下面 footer.controls 两条规则）。
   ⚠️ 它**不能**再作为 article 的直接子元素：article 是 `flex-direction: column`，默认 `align-items: stretch`
   ⇒ 气泡会被拉成整卡片宽的“横条”（实测 526px / 内容宽 528）—— 这正是它以前看着像标题栏的原因。 */
body article.blog-post .comments {
	position: static;
	display: inline-flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 5px 13px 5px 30px;
	border-radius: var(--r-pill);
	background-color: var(--c-brand-050);
	background-image: url("images/icon-bubble.svg");
	background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 14px 14px;
	color: var(--c-brand-600);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.5;
}

/* 成果卡底部：气泡在「了解更多」上方、靠右。想让按钮也一起靠右，把 align-items 改成 flex-end 即可。 */
body .main-row > * > article > footer.controls {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

body .main-row > * > article > footer.controls .comments {
	align-self: flex-end;
}

body article.blog-post .comments:hover {
	background-color: rgba(11, 125, 153, 0.12);
	color: var(--c-brand-700);
}

body article.blog-post .blog-post-image {
	width: 100%;
	border-radius: var(--r);
	border: 1px solid var(--c-line);
	background: #fff;
}

/* 首页“科研团队”照片卡 */
body .team-photo-card {
	display: block;
	overflow: hidden;
	border-radius: var(--r);
	box-shadow: var(--sh-2);
}

/* 照片**占满卡片宽度**（不留右侧空白），靠裁掉画面的上缘来压低高度：
   原图 1440x720（2:1），上方约 22% 是天花板与灯（无人物）⇒ 固定 aspect-ratio + object-fit: cover
   + `object-position: center bottom` 只从顶部裁，绝不裁到人（人物头部约在 35% 处）。
   实测 1440：336x134（原来是 336x168，等比缩到 78% 后是 262x131 —— 那种做法右边会留 74px 空白）。 */
body .team-photo-card img {
	display: block;
	width: 100%;
	aspect-ratio: 2.5 / 1;
	object-fit: cover;
	object-position: center bottom;
	margin: 0;
	border-radius: var(--r);
	transition: transform 0.5s var(--ease);
}

body .team-photo-card:hover img {
	transform: scale(1.03);
}

/* 带图条目（首页研究定位 / 研究方向页） */
body ul.big-image-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	overflow: visible;
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--c-line-soft);
}

body ul.big-image-list li:first-child {
	padding-top: 0;
	border-top: 0;
}

body ul.big-image-list li > a {
	flex: 0 0 auto;
}

body ul.big-image-list li img {
	flex: 0 0 128px;
	float: none;
	width: 128px;
	margin: 2px 0 0;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--sh-1);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

body ul.big-image-list li:hover img {
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
}

body ul.big-image-list li h3 {
	margin-bottom: 0.35em;
}

body ul.big-image-list li p {
	margin-bottom: 0;
	font-size: 0.93rem;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   10. 科研团队页
   -------------------------------------------------------------------------- */
body #contact-heading {
	position: relative;
	padding-left: 0;
	margin-bottom: 0.5em;
	font-size: 1.45rem;
}

body #contact-heading::before {
	content: none;
}

body #contact-image {
	display: block;
	width: 100%;
	/* 180px：原图自然宽 190px（images/team/*.png 为 190×266），小于自然宽度就不会被放大发虚。
	   1440 宽下实测：220 → 180px 宽（308 → 252px 高），手机上也是同一尺寸。 */
	max-width: 180px;
	margin: 0 0 18px;
	border-radius: var(--r);
	background: var(--c-brand-050);
	box-shadow: var(--sh-2);
	object-fit: cover;
}

body #contact-title {
	margin: 0;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: 0.9rem;
	line-height: 1.9;
	word-break: break-word;
}

/* 成员两列按「原站次序」纵向排布：左列 11 人、右列 5 人。
   若改用单个 grid（横向填充），张蕾会被拉到候盈男右边，次序就变了。 */
body #team-members .team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

body #team-members ul.link-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
}

body #team-members ul.link-list li {
	justify-content: flex-start;
	padding: 5px 11px;
	margin: 0;
	line-height: 1.4;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease),
		transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

body #team-members ul.link-list li:hover {
	border-color: var(--c-brand-300);
	background: var(--c-brand-050);
	transform: translateX(2px);
	box-shadow: var(--sh-1);
}

body #team-members ul.link-list li a {
	display: block;
	width: 100%;
	font-size: 0.9rem;
}

body #team-members ul.link-list li:has(a.is-active) {
	border-color: var(--c-brand);
	background: var(--c-brand-050);
	box-shadow: var(--sh-1);
}

body #team-members ul.link-list li a.is-active {
	color: var(--c-brand-700);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. 研究方向页
   -------------------------------------------------------------------------- */
body ul.small-image-list.research-direction-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
}

body ul.research-direction-list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0;
	padding: 24px 16px 22px;
	text-align: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: linear-gradient(165deg, #fbfdfe 0%, #ffffff 62%);
	overflow: visible;
	transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
		border-color 0.28s var(--ease);
}

body ul.research-direction-list li:hover {
	transform: translateY(-3px);
	border-color: #d6e6ec;
	box-shadow: var(--sh-2);
}

/* 图标为内联 SVG 线性图标（下方 HTML 里手绘，24 格栅、圆头描边、currentColor）。
   原来的 images/pic1–5.svg 是从图标站下载的黑色实心图形：风格与站点不搭，
   且原件是 800×800 的位图式路径，缩到 34px 后边缘发毛。 */
body ul.research-direction-list li > a {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--c-brand-050);
	box-shadow: inset 0 0 0 1px rgba(11, 125, 153, 0.1);
	transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

body ul.research-direction-list li:hover > a {
	transform: scale(1.06);
	background: rgba(11, 125, 153, 0.11);
}

body ul.research-direction-list li svg {
	width: 30px;
	height: 30px;
	color: var(--c-brand-600);
}

body ul.research-direction-list li:hover svg {
	color: var(--c-brand-700);
}

body ul.research-direction-list li h4 {
	margin: 0;
	color: var(--c-ink);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   12. 项目成果页
   -------------------------------------------------------------------------- */
body.list-page .list-layout {
	/* display/align-items 原本由 main.css 旧主题提供，现已自持 */
	display: grid;
	align-items: start;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 24px;
}

body.list-page .list-sidebar {
	position: sticky;
	top: calc(var(--hdr-h) + 20px);
	padding: 20px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
}

body.list-page .list-sidebar-title {
	display: block;
	margin: 0 0 0.9em;
	padding: 0 0 0.7em;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
}

body.list-page .list-sidebar-title::before {
	content: none;
}

body.list-page .list-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.list-page .list-nav a {
	display: block;
	position: relative;
	padding: 10px 12px 10px 16px;
	border-radius: 10px;
	color: var(--c-ink-2);
	font-size: 0.94rem;
	line-height: 1.5;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

body.list-page .list-nav a::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 2px;
	background: var(--c-brand);
	transform: translateY(-50%);
	transition: height 0.25s var(--ease);
}

body.list-page .list-nav a:hover {
	background: var(--c-brand-050);
	color: var(--c-brand-600);
}

body.list-page .list-nav a.is-active {
	background: var(--c-brand-050);
	color: var(--c-brand-700);
	font-weight: 600;
}

body.list-page .list-nav a.is-active::before {
	height: 20px;
}

body.list-page .list-content {
	min-width: 0;
	padding: clamp(22px, 2.1vw, 32px);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
}

body.list-page .list-content h2 {
	margin-top: 2.1em;
	padding-bottom: 0.55em;
	border-bottom: 1px solid var(--c-line);
}

body.list-page .list-content h2:first-child {
	margin-top: 0;
}

body.list-page h2[id] {
	scroll-margin-top: calc(var(--hdr-h) + 24px);
}

/* 成果条目：每行一条，左对齐（项目/论文均为 <br> 分隔，不做悬挂缩进） */
body.list-page .list-content p {
	margin-bottom: 1.4em;
	color: var(--c-ink-2);
	font-size: 0.95rem;
	line-height: 2.05;
}

body.list-page .list-content p .smaller-text {
	display: block;
	color: var(--c-muted);
	font-size: 0.9rem;
	line-height: 2;
}

/* 项目 / 获奖清单（已转为语义化 ul>li，逐条可悬停） */
body .result-list {
	margin: 0 0 0.6em;
	padding: 0;
	list-style: none;
}

body .result-list li {
	position: relative;
	margin: 0;
	padding: 7px 12px 7px 26px;
	border-radius: 8px;
	color: var(--c-ink-2);
	font-size: 0.95rem;
	line-height: 28px;
	transition: background-color 0.2s var(--ease);
}

body .result-list li::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-brand);
	opacity: 0.7;
}

body .result-list li + li {
	box-shadow: inset 0 1px 0 var(--c-line-soft);
}

body .result-list li:hover {
	background-color: var(--c-brand-050);
}

body .result-list.result-list-award li::before {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--c-brand);
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   13. 页脚
   -------------------------------------------------------------------------- */
body #footer-wrapper {
	margin: 0;
	padding: clamp(40px, 4.4vw, 66px) 0 clamp(24px, 2.4vw, 34px);
	background: var(--grad-ink);
	color: rgba(226, 240, 244, 0.72);
}

body #footer-wrapper h2 {
	margin-bottom: 1em;
	padding-left: 15px;
	color: #fff;
	font-size: 1.02rem;
	letter-spacing: 0.02em;
}

body #footer-wrapper h2::before {
	background: linear-gradient(180deg, var(--c-brand-300), var(--c-brand));
}

body #footer-wrapper p {
	color: rgba(226, 240, 244, 0.72);
	font-size: 0.93rem;
	line-height: 2.05;
}

body #footer-wrapper strong {
	color: #fff;
}

body #footer-wrapper a {
	color: rgba(226, 240, 244, 0.75);
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

body #footer-wrapper a:hover {
	color: #fff;
}

body #footer-wrapper ul.link-list li {
	justify-content: flex-start;
	padding: 6px 0;
	border-top: 0;
	border-radius: 0;
	cursor: pointer;
}

body #footer-wrapper ul.link-list li:hover {
	background: transparent;
}

body #footer-wrapper ul.link-list li::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--c-brand-300);
	opacity: 0.55;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

body #footer-wrapper ul.link-list li:hover::before {
	opacity: 1;
	transform: scale(1.25);
}

body #footer-wrapper ul.link-list li a {
	display: block;
	flex: 1 1 auto;
	width: auto;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 1;
	font-size: 0.93rem;
}

body #footer-wrapper ul.link-list li:hover a {
	color: #fff;
	transform: translateX(2px);
}

body #footer-wrapper .row + .row {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body #copyright {
	margin: 0;
	padding: 0;
	border-top: 0;
	color: rgba(226, 240, 244, 0.48);
	font-size: 0.84rem;
	line-height: 1.9;
	text-align: center;
}

body #copyright a {
	color: rgba(226, 240, 244, 0.48);
}

body #copyright a:hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
   14. 回到顶部
   -------------------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	right: clamp(16px, 2.4vw, 34px);
	bottom: clamp(16px, 2.4vw, 34px);
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--c-brand-700);
	box-shadow: var(--sh-2);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
		visibility 0.28s, background-color 0.2s var(--ease);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.back-to-top:hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: var(--sh-3);
}

.back-to-top::before {
	content: "";
	width: 10px;
	height: 10px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateY(2px) rotate(45deg);
}

/* --------------------------------------------------------------------------
   15. 入场动画（纯 CSS，无 JS 依赖；不支持动画时直接显示）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes rise-in {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	body:not(.list-page) #main > .container > .row > * {
		animation: rise-in 0.62s var(--ease) both;
	}

	body:not(.list-page) #main > .container > .row > *:nth-child(2) {
		animation-delay: 0.07s;
	}

	body:not(.list-page) #main > .container > .row > *:nth-child(3) {
		animation-delay: 0.14s;
	}

	body:not(.list-page) #main > .container > .row > *:nth-child(4) {
		animation-delay: 0.21s;
	}

	body:not(.list-page) #main > .container > .row > *:nth-child(5) {
		animation-delay: 0.28s;
	}
}

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

	body #banner .banner-slide,
	body .main-row > * > section,
	body .main-row > * > article,
	body .team-photo-card img,
	.back-to-top {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   16. 响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1280px) {
	:root {
		--hdr-h: 68px;
	}

	body #header h1 img {
		max-height: 40px;
	}

	body #banner {
		height: clamp(400px, 56vh, 560px);
	}
}

@media screen and (max-width: 980px) {
	:root {
		--hdr-h: 52px;
	}

	body #header {
		display: none;
	}

	body #banner .header-wrap {
		display: none;
	}

	body .main-row {
		margin-top: -20px;
		margin-left: -20px;
	}

	body .main-row > * {
		padding: 20px 0 0 20px;
	}

	body #main {
		padding: 34px 0 52px;
	}

	body .page-hero {
		padding: 30px 0;
	}

	body #banner {
		height: clamp(360px, 52vh, 460px);
	}

	body .hero-intro {
		margin-top: -46px;
	}

	body #banner .banner-controls {
		top: 64px;
		right: 16px;
		bottom: auto;
		flex-direction: row;
		gap: 6px;
		transform: none;
	}

	body .banner-dot {
		width: 22px;
		height: 4px;
	}

	body .banner-dot.active {
		width: 34px;
		height: 4px;
	}

	body.list-page .list-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.list-page .list-sidebar {
		position: static;
		top: auto;
		padding: 16px;
		margin-bottom: 0.8em;
	}

	body.list-page .list-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	body.list-page .list-nav a {
		padding: 8px 14px;
		border: 1px solid var(--c-line);
		background: #fff;
	}

	body.list-page .list-nav a::before {
		content: none;
	}

	body #page-wrapper {
		padding-top: 52px;
	}

	/* 移动端页头（#titleBar / #navPanel 由 util.js 的 panel() 驱动） */
	body #titleBar {
		height: 52px;
		background-color: rgba(255, 255, 255, 0.95);
		background-image: none;
		border-bottom: 1px solid rgba(13, 43, 53, 0.08);
		box-shadow: 0 6px 20px rgba(9, 40, 50, 0.06);
		color: var(--c-ink);
	}

	/* main.js 注入的 .title 是空 span（$('#logo').html() 对 <img> 返回空串）
	   ⇒ 用背景图画紧凑商标，避免拉出超宽图片把版心撑破 */
	body #titleBar .title {
		display: block;
		width: 68px;
		height: 28px;
		margin: 12px auto 0;
		font-size: 0;
		line-height: 0;
		background: url("../../images/logo.jpg") no-repeat center / contain;
	}

	body #titleBar .toggle {
		top: 0;
		left: 0;
		width: 56px;
		height: 52px;
	}

	body #titleBar .toggle:after {
		content: none;
		display: none;
	}

	body #titleBar .toggle:before {
		content: "";
		position: absolute;
		left: 18px;
		top: 19px;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: var(--c-ink-2);
		box-shadow: 0 6px 0 var(--c-ink-2), 0 12px 0 var(--c-ink-2);
		transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
	}

	body #navPanel {
		background: #082c38;
		color: #fff;
		box-shadow: inset -10px 0 40px rgba(0, 0, 0, 0.45);
	}

	body #navPanel .link:first-child {
		border-top: 0;
	}

	body #navPanel .link {
		height: 54px;
		line-height: 54px;
		padding: 0 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: 0;
		color: rgba(255, 255, 255, 0.88);
		font-size: 0.98rem;
		transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
	}

	body #navPanel .link:hover,
	body #navPanel .link:focus {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}
}

@media screen and (max-width: 736px) {
	body {
		font-size: 15.5px;
	}

	body #header-wrapper .container,
	body #banner .header-wrap .container {
		width: calc(100% - 40px);
	}

	body #banner {
		height: clamp(330px, 56vh, 420px);
	}

body .hero-card {
	padding: 22px 18px;
	border-radius: 16px;
}

body #banner .banner-controls {
	top: 62px;
	right: 12px;
}

body .banner-dot {
	width: 18px;
	height: 4px;
}

body .banner-dot.active {
	width: 28px;
	height: 4px;
		font-size: 0.92rem;
	}

	body .main-row {
		margin-top: -16px;
		margin-left: -16px;
	}

	body .main-row > * {
		padding: 16px 0 0 16px;
	}

	body .main-row > * > section,
	body .main-row > * > article {
		padding: 20px 18px;
	}

	body #main {
		padding: 26px 0 40px;
	}

	body #footer-wrapper {
		padding: 36px 0 22px;
	}

	body #copyright {
		font-size: 0.78rem;
	}

	body ul.big-image-list li {
		gap: 14px;
	}

	body ul.big-image-list li img {
		flex-basis: 96px;
		width: 96px;
	}

	body.list-page .list-content {
		padding: 20px 18px;
	}

	body.list-page .list-content p,
	body.list-page .list-content p .smaller-text {
		text-indent: -1.35em;
		padding-left: 1.35em;
		font-size: 0.88rem;
		line-height: 1.95;
	}

	.back-to-top {
		width: 40px;
		height: 40px;
	}
}