:root {
  /* 双底色节奏 + 唯一强调色(朱砂承担 Apple Blue 的"唯一可点色"角色) */
  --ink: #141210;
  --paper: #f7f2e8;
  --paper-warm: #f3ecdd;
  --text: #1d1c1a;
  --text-2: rgba(20, 18, 15, 0.62);
  --text-dark: rgba(247, 242, 232, 0.92);
  --text-dark-2: rgba(247, 242, 232, 0.62);
  --cinnabar: #b21f17;
  --white: #fff;
  --mount: #fdfaf3; /* 装裱卡纸(浅底) */
  --mount-deep: #f6f1e6; /* 装裱卡纸(暗底) */
  --line: rgba(20, 18, 15, 0.14);
  --shadow: 0 5px 30px rgba(12, 10, 6, 0.22);
  --radius-pill: 980px;
  --ease-press: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* Apple sheet 曲线:快出缓收 */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 clamp(18px, 4vw, 56px);
  color: var(--text);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(247, 242, 232, 0.78);
  border-bottom: 1px solid rgba(20, 18, 15, 0.08);
}

.brand,
.site-nav {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-seal {
  width: 36px;
  height: 36px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.site-nav {
  gap: clamp(14px, 2.4vw, 34px);
  font-size: 14px;
  color: var(--text-2);
}

.site-nav a {
  position: relative;
  padding: 8px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cinnabar);
  transition: width 220ms ease;
}

.site-nav a:hover::after {
  width: 100%;
}

/* 移动端菜单开关(桌面隐藏) */
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 80ms var(--ease-press);
}

.hero-section {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding: 120px clamp(18px, 5vw, 72px) 64px;
  isolation: isolate;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 60px 0 4vh 0;
  z-index: -1;
  display: grid;
  align-items: center;
  opacity: 0.9;
  /* 必须裁切:宽屏下画的实际高度大于本容器(grid 行高由内容决定,img 的 height:100% 退化成 auto),
     画会从容器底部探出去,而淡出渐变 ::before 只覆盖本容器——探出的那截没有任何遮罩,
     在首屏底部形成一条又白又清晰的横带。裁在容器底边处渐变已达 0.94,是自然淡出不会留硬边。 */
  overflow: hidden;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(247, 242, 232, 0.94) 3%, rgba(247, 242, 232, 0.12) 40%),
    linear-gradient(90deg, rgba(247, 242, 232, 0.82), rgba(247, 242, 232, 0) 38% 72%, rgba(247, 242, 232, 0.45));
  z-index: 1;
}

.hero-art img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: contrast(1.08) saturate(0.92);
}

.hero-copy {
  max-width: 850px;
  position: relative;
  z-index: 2;
}

.eyebrow,
.kicker {
  margin: 0 0 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cinnabar);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  letter-spacing: 0;
}

/* 展示级大字收紧字距、压行高(字号越大字距越负,正文归零) */
h1 {
  font-size: clamp(92px, 17vw, 220px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.14;
}

p {
  line-height: 1.7;
}

.hero-subtitle {
  max-width: 650px;
  margin: 22px 0 0;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--text-2);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  transition: transform 80ms var(--ease-press), background 200ms ease, color 200ms ease, filter 200ms ease, border-color 200ms ease;
}

.button:active,
.filter-tag:active,
.nav-toggle:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--cinnabar);
  color: var(--white);
  border-color: var(--cinnabar);
}

.button-primary:hover {
  filter: brightness(1.08);
}

.button-ghost {
  background: transparent;
  border-color: currentColor;
}

.button-ghost:hover {
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

.intro-band,
.section {
  position: relative;
  z-index: 1;
  padding: clamp(76px, 11vw, 160px) clamp(18px, 5vw, 72px);
}

.intro-band {
  max-width: 1180px;
  margin: 0 auto;
}

.intro-band h2 {
  max-width: 920px;
}

.intro-band p:last-child {
  max-width: 760px;
  font-size: 18px;
  color: var(--text-2);
}

.dark-section {
  background: var(--ink);
  color: var(--text-dark);
}

.section-heading {
  max-width: 900px;
  margin-bottom: clamp(38px, 6vw, 72px);
}

.section-heading p:not(.eyebrow) {
  max-width: 720px;
  color: var(--text-dark-2);
  font-size: 18px;
}

.timeline-section .section-heading p,
.publications-section .section-heading p,
.achievements-section .section-heading p {
  color: var(--text-2);
}

/* 纪录短片《大师》:横屏 16:9,置于生平版块开篇。
   与「画外」的 .film-* 是两套——那边 9:16 竖屏走双栏立轴,这边横屏走单栏满幅。 */
.portrait-film {
  max-width: 1180px;
  /* 左对齐,与同版块的 .section-heading / .mentors 取齐——它们都不居中,
     这里若用 margin:auto 会比标题右缩约 58px。 */
  margin: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 88px);
  padding: 0;
}

.portrait-film-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.portrait-film-caption {
  margin-top: clamp(20px, 2.6vw, 30px);
}

.portrait-film-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.portrait-film-title {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.14;
}

.portrait-film-seal {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

.portrait-film-meta {
  margin: 0 0 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cinnabar);
}

.portrait-film-note {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-2);
}

/* 师承:三位先生各一条,姓名链到其百科词条 */
.mentors {
  max-width: 1180px;
  margin: 0 0 clamp(38px, 6vw, 72px);
}

.mentors ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mentors li {
  padding: 24px 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.34);
}

.mentors li > a {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.mentors li > a:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

.mentors .mentor-years {
  margin-left: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.mentors li p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
}

@media (max-width: 980px) {
  .mentors ul {
    grid-template-columns: 1fr;
  }
}

/* 百科词条入口 */
.press-more {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 44px);
}

.press-more p {
  margin: 0;
  font-size: 15px;
  color: var(--text-dark-2);
}

.featured-work {
  display: grid;
  /* 图列按内容定宽:立轴画作多宽,卡纸就多宽。用 0.72fr 会撑出一块远宽于画的空板,
     画被晾在中间、两侧大片死底色(1440 宽下画 413px、空底 312px),正是"卡得太紧"的由来。 */
  grid-template-columns: minmax(0, auto) minmax(280px, 0.46fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: 64px;
}

.featured-work img {
  /* 由高度驱动、宽度自适应,卡纸紧贴画作 */
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(92vh, 900px);
  object-fit: contain;
  background: var(--mount);
  padding: clamp(10px, 0.9vw, 18px);
  box-shadow: var(--shadow);
}

.featured-work h3 {
  font-size: clamp(26px, 3vw, 46px);
}

.featured-work p {
  color: var(--text-dark-2);
  font-size: clamp(18px, 1.5vw, 21px);
}

.works-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.filter-tag {
  appearance: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(247, 242, 232, 0.22);
  background: rgba(247, 242, 232, 0.06);
  color: var(--text-dark-2);
  transition: transform 80ms var(--ease-press), background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.filter-tag:hover {
  border-color: rgba(247, 242, 232, 0.5);
}

.filter-tag.is-active {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: var(--white);
}

.works-grid {
  column-count: 4;
  column-gap: 18px;
}

.work-card {
  appearance: none;
  display: block;
  width: 100%;
  border: 1px solid rgba(247, 242, 232, 0.14);
  padding: 0;
  margin: 0 0 18px;
  background: rgba(247, 242, 232, 0.06);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  break-inside: avoid;
}

.work-card img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.95);
  transition: transform 500ms ease, filter 500ms ease;
}

.work-card:hover img {
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.05);
}

.work-card div {
  padding: 14px 16px 16px;
}

.work-card span {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dark-2);
}

.work-card h3 {
  margin: 6px 0 0;
  font-size: 18px;
}

.works-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.works-more .button {
  color: var(--paper);
  border-color: rgba(247, 242, 232, 0.3);
}

.works-more[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .works-grid {
    column-count: 2;
  }
}

@media (max-width: 760px) {
  .works-grid {
    column-count: 1;
  }
}

.wide-image-section {
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
}

/* 整幅完整呈现:原来用 object-fit:cover 去填满一个固定高度的版块,
   横幅画作被上下裁掉看不全。改为版块高度跟着画走,一寸不裁。 */
.wide-image-section img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.05) contrast(1.02);
}

.wide-image-section .wide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(34px, 5vw, 70px);
}

.wide-image-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 16, 16, 0.66), transparent 58%);
}

.wide-caption {
  position: relative;
  z-index: 1;
  max-width: 880px;
  color: var(--paper);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline li {
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.34);
}

.timeline span,
.publication-wall span {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--cinnabar);
  font-weight: 500;
}

.timeline h3 {
  margin: 28px 0 16px;
}

.timeline p {
  color: var(--text-2);
}

.style-section {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(300px, 0.52fr);
  gap: clamp(30px, 6vw, 86px);
  align-items: center;
  background: var(--ink);
  color: var(--text-dark);
}

/* 山水立轴:不加装裱底板、不加投影——原来 width:100% 撑出一块比画宽得多的底板
   (1440 下画只有 297px、两侧空掉 372px),一幅山水被框在小方块里反而显得局促。
   改为由高度驱动、宽度自适应,画作自己就是边界。原图高 1400px,取一屏高不会过采样。 */
.style-art img {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(100vh, 1400px);
  object-fit: contain;
}

.style-copy p:not(.eyebrow) {
  color: var(--text-dark-2);
  font-size: 18px;
}

.style-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.style-tags span {
  padding: 9px 13px;
  border: 1px solid rgba(247, 242, 232, 0.18);
  background: rgba(247, 242, 232, 0.06);
  color: var(--text-dark-2);
}

.achievements-body {
  max-width: 980px;
  display: grid;
  gap: 22px;
}

.achievements-body p {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.85;
}

.press-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.press-tags span {
  padding: 9px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  border: 1px solid rgba(247, 242, 232, 0.18);
  background: rgba(247, 242, 232, 0.06);
  color: var(--text-dark-2);
}

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

/* 每一本做成一册线装书封面:左侧书脊+四枚订眼,封面纸帘竖纹,书名落在题签上。
   纯 CSS 渐变实现,不引入图片,不新增强调色。 */
.publication-wall article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 30px 30px 30px 58px;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(20, 18, 15, 0.03) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, var(--mount-deep) 0 40px, rgba(20, 18, 15, 0.06) 40px 41px, var(--mount) 41px);
  box-shadow: var(--shadow);
}

/* 书脊上的装订线(四枚订眼) */
.publication-wall article::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 34px;
  bottom: 34px;
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    rgba(20, 18, 15, 0.38) 0 9px,
    transparent 9px calc((100% - 36px) / 4)
  );
}

/* 书口:右缘一道浅浅的叠页暗边 */
.publication-wall article::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(90deg, transparent, rgba(20, 18, 15, 0.07));
}

.publication-wall span {
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.5);
}

/* 题签:旧时贴在封面左上的书名纸条 */
.publication-wall h3 {
  margin-top: 22px;
  padding: 16px 14px;
  border: 1px solid rgba(20, 18, 15, 0.18);
  background: var(--white);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.archive-section {
  min-height: 74vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(16, 16, 16, 0.72), rgba(16, 16, 16, 0.72)),
    url("images/recent/recent_57.jpg") center / cover;
  color: var(--paper);
}

.archive-card {
  max-width: 760px;
  padding: clamp(28px, 5vw, 58px);
  background: rgba(12, 11, 10, 0.68);
  border: 1px solid rgba(247, 242, 232, 0.18);
}

.archive-card p:not(.eyebrow) {
  color: var(--text-dark);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(10, 10, 10, 0.9);
  opacity: 0;
  visibility: hidden;
  /* visibility 是离散属性:若和 opacity 一起做 240ms 过渡,开启后前 120ms 它仍判定为 hidden,
     期间灯箱内的按钮无法获得焦点。改为开启时立刻可见、关闭时等淡出结束再隐藏。 */
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}

/* 开合时画作从缩略图方向"生长"进来(transform-origin 由 app.js 锚到被点的卡片) */
.lightbox img {
  /* 必须 auto:图上带 width/height 属性(用于换图时先占好位),
     若不置 auto,max-width 与 max-height 会各自独立裁剪、比例失真,画作上下会露出底色空带 */
  width: auto;
  height: auto;
  max-width: min(92vw, 1280px);
  max-height: 82vh;
  object-fit: contain;
  background: var(--paper);
  transform: scale(0.94);
  transition: transform 360ms var(--ease-spring);
}

/* 书法实物普遍小于画作,放大看时守住同一个大小关系 */
.lightbox img.is-calligraphy {
  max-width: min(72vw, 980px);
  max-height: 60vh;
}

.lightbox.is-open img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(247, 242, 232, 0.34);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--paper);
  font-size: 30px;
  cursor: pointer;
  transition: transform 80ms var(--ease-press), border-color 200ms ease;
}

.lightbox-close:hover {
  border-color: rgba(247, 242, 232, 0.7);
}

.lightbox-close:active {
  transform: scale(0.94);
}

/* 左右翻页(与关闭钮同款圆钮),手机上还可以直接左右滑动 */
.lightbox-nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  padding: 0 0 4px;
  border: 1px solid rgba(247, 242, 232, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.4);
  color: var(--paper);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform 80ms var(--ease-press), border-color 200ms ease, background 200ms ease;
}

.lightbox-nav:hover {
  border-color: rgba(247, 242, 232, 0.7);
  background: rgba(10, 10, 10, 0.7);
}

.lightbox-nav:active {
  transform: scale(0.94);
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-prev {
  left: clamp(10px, 2.5vw, 34px);
}

.lightbox-next {
  right: clamp(10px, 2.5vw, 34px);
}

.lightbox-meta {
  color: var(--text-dark);
  margin-top: 14px;
  font-size: 14px;
}

.lightbox-count {
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dark-2);
}

.lightbox-count[hidden] {
  display: none;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms var(--ease-spring);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 作品卡按压反馈(置于 .reveal 之后,保证盖过 is-visible 的 transform) */
.work-card:active {
  transform: translateY(0) scale(0.985);
  transition: transform 80ms var(--ease-press);
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav {
    transition: none;
  }

  .lightbox img {
    transform: none;
    transition: none;
  }

  .lightbox-nav {
    transition: none;
  }

  .work-card img {
    transition: none;
  }

  .work-card:hover img {
    transform: none;
  }
}

@media (max-width: 980px) {
  .featured-work,
  .style-section {
    grid-template-columns: 1fr;
  }

  .timeline,
  .publication-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 52px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px clamp(18px, 5vw, 32px) 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: 20px;
    font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
    transform: translateY(-120%);
    transition: transform 320ms var(--ease-spring);
  }

  .site-nav.is-open {
    transform: translateY(0);
  }

  .site-nav a {
    padding: 12px 0;
  }

  .hero-section {
    min-height: 92vh;
    padding-top: 116px;
  }

  .hero-art {
    inset: 120px 0 24vh;
  }

  .hero-art::before {
    background: linear-gradient(0deg, rgba(247, 242, 232, 0.98), rgba(247, 242, 232, 0.28));
  }

  h1 {
    font-size: clamp(78px, 31vw, 132px);
  }

  h2 {
    font-size: clamp(34px, 12vw, 60px);
  }

  .timeline,
  .publication-wall {
    grid-template-columns: 1fr;
  }

  /* 手机端不再把作品裁成等高方块——整幅完整呈现,该长的长该方的方 */

  /* 横幅整幅不裁后,手机上图只有两百来像素高,原尺寸的标题会把画整个盖住 */
  .wide-image-section .wide-caption {
    padding: 16px 18px;
  }

  .wide-caption .eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
  }

  .wide-caption h2 {
    font-size: clamp(21px, 6vw, 30px);
  }

  /* 翻页钮移到底部,不压住画面左右两边 */
  .lightbox-nav {
    top: auto;
    bottom: 22px;
    margin-top: 0;
  }

  .lightbox-prev {
    left: 22px;
  }

  .lightbox-next {
    right: 22px;
  }
}

/* ===== 精选长卷 · 独幅展屏 ===== */
.plate {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* 上下留白收一点,省出来的高度全给画 */
  padding: clamp(36px, 5vh, 78px) clamp(16px, 4vw, 64px);
}
.plate-paper { background: var(--paper); }
.plate-warm { background: var(--paper-warm); }
.plate-dark {
  background: var(--ink);
  color: var(--text-dark);
}

.plate figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: var(--mount);
  padding: clamp(14px, 1.8vw, 28px);
  box-shadow: 0 22px 60px rgba(12, 10, 6, 0.24);
}
.plate-dark figure {
  background: var(--mount-deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.plate img {
  display: block;
  width: auto;
  height: auto;
  /* 宽度上限收紧,让高度成为主要约束:否则长宽比越夸张的作品越占地方,
     一幅窄长的书法横幅会把一幅更大的设色画压下去(现实中大小恰恰相反)。
     真正按实物尺寸排版需要每幅作品的实际厘米数,站内目前没有这项数据。 */
  max-width: min(84vw, 1440px);
  max-height: 78vh;
  box-shadow: none;
}

/* 书法:实物普遍小于画作,展屏与灯箱上限相应收小,
   使页面上的大小关系与现实一致。等拿到每件作品的实际厘米数后可换成按实物比例。 */
.plate-calligraphy img {
  max-width: min(64vw, 1040px);
  max-height: 56vh;
}

/* 竖幅:左右构图 */
.plate-side { flex-direction: row; gap: clamp(24px, 4vw, 72px); }
.plate-side img { max-width: min(78vw, 1180px); max-height: 88vh; }

.plate-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 660px;
}
.plate-head { display: flex; align-items: center; gap: 22px; }
.plate-caption-v { align-items: flex-start; max-width: 340px; }
.plate-caption-v .plate-head { align-items: flex-start; }

.plate-note {
  margin: 0;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-2);
  text-align: center;
}
.plate-poem {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--text);
  text-align: center;
}
.plate-caption-v .plate-note {
  max-width: 17em;
  text-align: left;
}
.plate-caption-v .plate-poem { text-align: left; }
.plate-dark .plate-note { color: var(--text-dark-2); }
.plate-dark .plate-poem { color: var(--text-dark); }

.plate-num {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: 15px;
  color: rgba(20, 18, 15, 0.4);
}
.plate-dark .plate-num { color: rgba(247, 242, 232, 0.45); }

.plate-title,
.plate-title-v {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
.plate-title { font-size: clamp(26px, 3vw, 46px); }
.plate-title-v {
  writing-mode: vertical-rl;
  font-size: clamp(32px, 4vw, 58px);
}

.plate-meta,
.plate-meta-v {
  font-size: 13px;
  letter-spacing: 0.32em;
  color: rgba(20, 18, 15, 0.5);
}
.plate-meta-v { writing-mode: vertical-rl; padding-top: 6px; }
.plate-dark .plate-meta,
.plate-dark .plate-meta-v { color: rgba(247, 242, 232, 0.55); }

.plate img.plate-seal {
  flex: 0 0 auto;
  width: 54px;
  max-width: 54px;
  height: auto;
  max-height: none;
  box-shadow: none;
}

@media (max-width: 760px) {
  .plate,
  .plate-side { flex-direction: column; gap: 24px; }
  .plate img,
  .plate-side img { max-width: 94vw; max-height: 70vh; }
  .plate-caption-v { align-items: center; max-width: 660px; }
  .plate-title-v { writing-mode: horizontal-tb; font-size: clamp(24px, 6vw, 32px); }
  .plate-meta-v { writing-mode: horizontal-tb; padding-top: 0; }
  .plate-caption-v .plate-note,
  .plate-caption-v .plate-poem { text-align: center; }
  .plate-caption-v .plate-note { max-width: 560px; }
}

/* ===== 画外·影像 =====
   源片是 9:16 竖屏(为短视频平台拍的)。桌面端不拉伸不裁剪,限宽成"立轴";
   右侧配题解与封面切换条,把竖屏从缺陷变成构图。移动端竖屏是原生比例,直接堆叠满宽。 */
.film-block {
  max-width: 1180px;
  margin-top: clamp(56px, 8vw, 110px);
  padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid rgba(247, 242, 232, 0.16);
}

.film-heading {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.film-heading h3 {
  margin-bottom: 14px;
}

.film-heading p:not(.kicker) {
  margin: 0;
  max-width: 620px;
  color: var(--text-dark-2);
  font-size: 17px;
}

.film-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.film-stage {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.film-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

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

.film-title {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.14;
}

.film-seal {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

.film-meta {
  margin: 0 0 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cinnabar);
}

.film-note {
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 480px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-dark-2);
}

.film-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.film-thumb {
  width: 84px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dark-2);
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.film-thumb img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: opacity 240ms var(--ease-press), border-color 240ms var(--ease-press);
}

.film-thumb span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.film-thumb:hover img,
.film-thumb:focus-visible img {
  opacity: 0.85;
}

.film-thumb.is-active img {
  opacity: 1;
  border-color: var(--cinnabar);
}

.film-thumb.is-active span {
  color: var(--text-dark);
}

.film-thumb:active {
  transform: scale(0.96);
  transition: transform 80ms var(--ease-press);
}

@media (max-width: 760px) {
  .film-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .film-note {
    font-size: 16px;
  }

  .film-thumb {
    width: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-thumb img {
    transition: none;
  }
}