/* ===== 小H中文选择器说明版：每个样式块上方均标注控制对象 ===== */
/* 共补充 237 条选择器中文说明；与原有 890 条属性说明配合阅读。 */

/* ===== 小H中文逐项说明版：每个 CSS 属性上方均标注用途 ===== */
/* 共补充 890 条中文说明；仅增加注释，没有修改任何原始参数。 */

/* ========================================
   CSS Variables & Design Tokens
   ======================================== */

/* 选择器说明：声明网页可使用的自定义字体文件。 */
@font-face {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "苏绣体";
    /* 中文注释：设置当前元素的“src”样式参数。 */
    src: url("fonts/字魂吴文化博物馆苏绣体.ttf") format("truetype");
    /* 中文注释：设置当前元素的“font-display”样式参数。 */
    font-display: swap;
}

/* 选择器说明：声明网页可使用的自定义字体文件。 */
@font-face {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "丛培伦楷体";
    /* 中文注释：设置当前元素的“src”样式参数。 */
    src: url("fonts/SIMKAI.TTF") format("truetype");
    /* 中文注释：设置当前元素的“font-display”样式参数。 */
    font-display: swap;
}

/* 选择器说明：定义全站可重复调用的颜色、字体、间距和动画变量。 */
:root {
    /* Colors */
    /* 中文注释：定义全站可重复使用的“--ink”颜色变量。 */
    --ink: #0A0A0A;
    /* 中文注释：定义全站可重复使用的“--ink-2”颜色变量。 */
    --ink-2: #0E0E0F;
    /* 中文注释：定义全站可重复使用的“--ink-3”颜色变量。 */
    --ink-3: #05070C;
    /* 中文注释：定义全站可重复使用的“--fg”颜色变量。 */
    --fg: #F2F1EF;
    /* 中文注释：定义全站可重复使用的“--fg-2”颜色变量。 */
    --fg-2: rgba(242, 241, 239, 0.72);
    /* 中文注释：定义全站可重复使用的“--fg-3”颜色变量。 */
    --fg-3: rgba(242, 241, 239, 0.46);
    /* 中文注释：定义全站可重复使用的“--line”颜色变量。 */
    --line: rgba(255, 255, 255, 0.14);
    /* 中文注释：定义全站可重复使用的“--line-soft”颜色变量。 */
    --line-soft: rgba(255, 255, 255, 0.08);

    /* Typography */
    /* 全站中文正文与栏目标题默认使用摄影师指定的楷体；Hero 主标题另用苏绣体。 */
    /* 中文注释：定义全站可重复使用的“--serif”字体变量。 */
    --serif: "丛培伦楷体", "KaiTi", "Noto Serif SC", "Songti SC", STSong, "SimSun", serif;
    /* 中文注释：定义全站可重复使用的“--sans”字体变量。 */
    --sans: "Inter", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    /* 中文注释：定义全站可重复使用的“--script”字体变量。 */
    --script: "Cormorant Garamond", "Brush Script MT", cursive;

    /* Spacing */
    /* 中文注释：定义全站可重复使用的“--space-xs”间距变量。 */
    --space-xs: clamp(8px, 1vw, 12px);
    /* 中文注释：定义全站可重复使用的“--space-sm”间距变量。 */
    --space-sm: clamp(12px, 1.5vw, 20px);
    /* 中文注释：定义全站可重复使用的“--space-md”间距变量。 */
    --space-md: clamp(20px, 2.5vw, 32px);
    /* 中文注释：定义全站可重复使用的“--space-lg”间距变量。 */
    --space-lg: clamp(32px, 4vw, 56px);
    /* 中文注释：定义全站可重复使用的“--space-xl”间距变量。 */
    --space-xl: clamp(56px, 7vw, 96px);

    /* Radius */
    /* 中文注释：定义全站可重复使用的“--radius-pill”圆角变量。 */
    --radius-pill: 999px;
    /* 中文注释：定义全站可重复使用的“--radius-circle”圆角变量。 */
    --radius-circle: 50%;
    /* 中文注释：定义全站可重复使用的“--radius-sm”圆角变量。 */
    --radius-sm: 4px;

    /* Transitions */
    /* 中文注释：定义全站可重复使用的“--transition-base”过渡动画变量。 */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 中文注释：定义全站可重复使用的“--transition-slow”过渡动画变量。 */
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Reset & Base
   ======================================== */

*,
*::before,
*::after {
    /* 中文注释：规定宽高计算时是否包含内边距和边框。 */
    box-sizing: border-box;
    /* 中文注释：设置元素外侧四周的间距。 */
    margin: 0;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 0;
}

/* 选择器说明：控制网页根节点的基础样式。 */
html {
    /* 中文注释：设置页面滚动是否采用平滑动画。 */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 选择器说明：控制网页正文整体的基础样式。 */
body {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字大小。 */
    font-size: clamp(14px, 1.2vw, 16px);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.6;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--ink);
    /* 中文注释：控制水平方向内容溢出的处理方式。 */
    overflow-x: hidden;
}

/* 选择器说明：控制网页中的所有图片的基础样式。 */
img {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: block;
    /* 中文注释：限制元素的最大宽度。 */
    max-width: 100%;
    /* 中文注释：设置元素高度。 */
    height: auto;
}

/* 选择器说明：控制网页中的所有链接的基础样式。 */
a {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: inherit;
    /* 中文注释：设置文字下划线、删除线等装饰。 */
    text-decoration: none;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: color var(--transition-base);
}

/* 中文注释：设置当前元素的“a”样式参数。 */
/* 选择器说明：控制选择器“a:hover”所匹配元素（鼠标悬停时）的样式。 */
a:hover {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
}

/* 选择器说明：控制网页中的所有按钮的基础样式。 */
button {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: inherit;
    /* 中文注释：设置文字大小。 */
    font-size: inherit;
    /* 中文注释：设置元素四周边框的粗细、样式和颜色。 */
    border: none;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: none;
    /* 中文注释：设置鼠标移到元素上时的指针样式。 */
    cursor: pointer;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: inherit;
}

/* 选择器说明：控制网页中的所有无序列表的基础样式。 */
ul {
    /* 中文注释：设置列表项目符号的样式。 */
    list-style: none;
}

/* ========================================
   Navigation
   ======================================== */

/* 选择器说明：控制顶部导航栏整体的样式。 */
.nav {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: fixed;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: 0;
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 1000;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: background var(--transition-base), backdrop-filter var(--transition-base);
}

/* 选择器说明：控制顶部导航栏整体、页面滚动后导航栏追加的状态样式的样式。 */
.nav.scrolled {
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: rgba(10, 10, 10, 0.85);
    /* 中文注释：给元素背后的画面添加模糊等滤镜。 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 选择器说明：控制顶部导航栏内部的横向排版容器的样式。 */
.nav__container {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: space-between;
    /* 中文注释：设置元素高度。 */
    height: clamp(56px, 8vh, 64px);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 0 clamp(24px, 4vw, 56px);
    /* 中文注释：设置元素下边框。 */
    border-bottom: 1px solid var(--line-soft);
}

/* 选择器说明：控制顶部导航栏整体、页面滚动后导航栏追加的状态样式、顶部导航栏内部的横向排版容器的样式。 */
.nav.scrolled .nav__container {
    /* 中文注释：设置当前元素的“border-bottom-color”样式参数。 */
    border-bottom-color: var(--line);
}

/* 选择器说明：控制左上角品牌与签名组合的样式。 */
.nav__brand {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: 2px;
}

/* 选择器说明：控制品牌英文手写字的样式。 */
.nav__brand-script {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--script);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(20px, 2vw, 26px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.02em;
}

/* 直接使用摄影师本人提供的透明艺术签名，不再以通用文字代替品牌。 */
/* 选择器说明：控制左上角艺术签名图片的样式。 */
.nav__brand-signature {
    /* 中文注释：设置元素宽度。 */
    width: clamp(150px, 8.8vw, 126px);
    /* 中文注释：设置元素高度。 */
    height: auto;
    /* 中文注释：限制元素的最大宽度。 */
    max-width: none;
    /* 中文注释：设置整个元素及其内容的透明度。 */
    opacity: 0.96;
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: brightness(3) contrast(1.15);
    /* 中文注释：设置元素与下方内容的混合方式。 */
    mix-blend-mode: screen;
}

/* 选择器说明：控制品牌下方辅助小字的样式。 */
.nav__brand-sub {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(8px, 0.7vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.15em;
}

/* 选择器说明：控制顶部导航菜单列表的样式。 */
.nav__menu {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(32px, 4.5vw, 68px);
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(18px, 2.2vw, 20px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
}

/* 选择器说明：统一控制“首页、作品、关于、日记、服务、联系”六个导航文字的颜色。 */
.nav__menu a {
    /* 中文注释：导航文字恢复为原来的柔和白色。 */
    color: var(--fg-2);
}

/* 选择器说明：控制导航文字在鼠标悬停和当前选中状态下的颜色。 */
.nav__menu a:hover,
.nav__menu .nav__link--active {
    /* 中文注释：悬停与选中时使用更明亮的白色。 */
    color: var(--fg);
}

/* 选择器说明：控制顶部导航菜单链接的样式。 */
.nav__link {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 4px 0;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: color var(--transition-base);
}

.nav__link:hover,
/* 选择器说明：控制当前选中的导航链接的样式。 */
.nav__link--active {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
}

/* 选择器说明：控制当前选中的导航链接（后置装饰伪元素）的样式。 */
.nav__link--active::after {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '';
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: 0;
    /* 中文注释：设置定位元素距离下边的位置。 */
    bottom: 0;
    /* 中文注释：设置元素高度。 */
    height: 1px;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--fg);
}

/* 选择器说明：控制顶部导航栏右侧的语言、暂停和菜单按钮区域的样式。 */
.nav__controls {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(16px, 2vw, 24px);
}

/* 选择器说明：控制中英文语言切换区域的样式。 */
.nav__lang {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: 6px;
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(11px, 0.9vw, 13px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.05em;
}

/* 选择器说明：控制语言切换中当前选中的文字的样式。 */
.nav__lang-active {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
}

/* 选择器说明：控制语言切换中间的分隔符的样式。 */
.nav__lang-sep {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
}

/* 选择器说明：控制语言切换中未选中的文字的样式。 */
.nav__lang-inactive {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
}

.nav__pause,
/* 选择器说明：控制移动端导航菜单按钮的样式。 */
.nav__hamburger {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: color var(--transition-base);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 8px;
}

.nav__pause:hover,
/* 选择器说明：控制移动端导航菜单按钮（鼠标悬停时）的样式。 */
.nav__hamburger:hover {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
}

/* 选择器说明：控制移动端导航菜单按钮的样式。 */
.nav__hamburger {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: none;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: 4px;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 8px 0;
}

/* 选择器说明：控制移动端导航菜单按钮的样式。 */
.nav__hamburger span {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: block;
    /* 中文注释：设置元素宽度。 */
    width: 20px;
    /* 中文注释：设置元素高度。 */
    height: 1px;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: currentColor;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ========================================
   Hero Section
   ======================================== */

/* 选择器说明：控制首页首屏主视觉区域的样式。 */
.hero {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: clamp(600px, 34.5vh, 400px);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: center;
    /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
    overflow: hidden;
}

/* 选择器说明：控制首屏背景主图及其取景方式的样式。 */
.hero__bg {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置图片或视频如何填满固定尺寸的容器。 */
    object-fit: cover;
    /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
    object-position: 60% 50%; /* 图片向左挪，更多显示照片右侧 */
}

/* 选择器说明：控制首屏图片上方的明暗渐变遮罩的样式。 */
.hero__overlay {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(
        to right,
        rgba(5, 7, 12, 0.85) 0%,
        rgba(10, 13, 18, 0.65) 25%,
        rgba(15, 19, 28, 0.45) 50%,
        rgba(22, 29, 43, 0.35) 75%,
        rgba(30, 38, 54, 0.25) 100%
    );
}

/* 选择器说明：控制首屏图片上方的明暗渐变遮罩（前置装饰伪元素）的样式。 */
.hero__overlay::before {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '';
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: 0;
    /* 中文注释：设置元素高度。 */
    height: 30%;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to bottom, rgba(5, 7, 12, 0.4), transparent);
}

/* 选择器说明：控制首屏图片上方的明暗渐变遮罩（后置装饰伪元素）的样式。 */
.hero__overlay::after {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '';
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离下边的位置。 */
    bottom: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: 0;
    /* 中文注释：设置元素高度。 */
    height: 25%;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to top, rgba(5, 7, 12, 0.5), transparent);
}

/* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
.hero__social {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: clamp(24px, 3vw, 40px);
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 50%;
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateY(-50%);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(20px, 2.5vh, 28px);
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
}

/* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
.hero__social a {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: color var(--transition-base), transform var(--transition-base);
}

/* 选择器说明：控制首屏左侧社交平台图标栏（鼠标悬停时）的样式。 */
.hero__social a:hover {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateX(2px);
}

/* 使用官方小红书单色标志，并与其余图标保持同一尺寸。 */
/* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
.hero__social img {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: block;
    /* 中文注释：设置元素宽度。 */
    width: 20px;
    /* 中文注释：设置元素高度。 */
    height: 20px;
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: invert(1);
}

/* 左侧社交栏与主视觉之间的细分隔线 */
/* 选择器说明：控制首屏左侧社交平台图标栏（后置装饰伪元素）的样式。 */
.hero__social::after {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '';
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: calc(100% + clamp(18px, 2.2vw, 34px));
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 50%;
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateY(-50%);
    /* 中文注释：设置元素宽度。 */
    width: 1px;
    /* 中文注释：设置元素高度。 */
    height: clamp(150px, 40vh, 240px);
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to bottom, transparent, var(--line), transparent);
}

/* 选择器说明：控制首屏左侧中英文主标题组合的样式。 */
.hero__titles {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: clamp(104px, 12.5vw, 172px);
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 50%;
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateY(-50%);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: flex-start;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(6px, 0.9vw, 14px);
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
    /* 中文注释：限制元素的最大高度。 */
    max-height: 100%;
}

/* 选择器说明：控制首屏中文主标题的通用样式的样式。 */
.hero__title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(45px, 4.5vw, 55px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.22;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.06em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: upright;
    /* 中文注释：给文字添加阴影以增强层次或可读性。 */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

/* 左列（第二句）在视觉上略微下沉，形成参考图的错落感 */
/* 选择器说明：控制首屏第二组错落标题的样式。 */
.hero__title--sub {
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(14px, 2.2vh, 26px);
}

/* Hero 两列标题统一采用摄影师指定的苏绣体，仅保留位置错落而不混用字形。 */
.hero__title--main,
/* 选择器说明：控制首屏第二组错落标题的样式。 */
.hero__title--sub {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "苏绣体", var(--serif);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.02em;
}

/* 选择器说明：控制首屏英文竖排标题的样式。 */
.hero__title-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(8px, 0.68vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.24em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: mixed;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 2.1;
    /* 中文注释：设置元素左侧的外间距。 */
    margin-left: clamp(10px, 1.4vw, 20px);
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(20px, 3vh, 36px);
}

/* 选择器说明：控制首屏右侧介绍文案和观看作品按钮组合的样式。 */
.hero__content {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: clamp(64px, 7vw, 104px);
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 50%;
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateY(-50%);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: flex-start;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(10px, 1.4vh, 16px);
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
}

/* 选择器说明：控制首屏右侧文案前的短分隔线的样式。 */
.hero__divider {
    /* 中文注释：设置元素宽度。 */
    width: clamp(40px, 4vw, 56px);
    /* 中文注释：设置元素高度。 */
    height: 1px;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--fg-2);
}

/* 选择器说明：控制首屏右侧三行中文介绍文案的样式。 */
.hero__text {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "丛培伦楷体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(17px, 1.4vw, 22px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 2;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.04em;
    /* 中文注释：给文字添加阴影以增强层次或可读性。 */
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* 选择器说明：把首屏摄影宣言分成上下两组，让四行文字仍保持清楚的“二加二”阅读节奏。 */
.hero__text-group {
    /* 中文注释：让每组文字独占一行布局区域，组内仍按换行标签分成两行。 */
    display: block;
}

/* 选择器说明：为摄影宣言的第二组文字增加轻微呼吸感，不制造明显的大空行。 */
.hero__text-group--second {
    /* 中文注释：仅拉开两组观点之间的距离。 */
    margin-top: 0.18em;
}

/* 选择器说明：控制首屏观看作品集按钮区域的样式。 */
.hero__cta {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(10px, 1.2vw, 16px);
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(4px, 0.8vh, 10px);
}

/* 选择器说明：控制首屏观看作品集的播放按钮的样式。 */
.hero__play {
    /* 中文注释：设置元素在弹性布局中的伸缩比例和基础尺寸。 */
    flex: none;
    /* 中文注释：设置元素宽度。 */
    width: clamp(34px, 3.1vw, 42px);
    /* 中文注释：设置元素高度。 */
    height: clamp(34px, 3.1vw, 42px);
    /* 中文注释：设置元素四周边框的粗细、样式和颜色。 */
    border: 1px solid var(--fg-2);
    /* 中文注释：设置元素圆角大小。 */
    border-radius: var(--radius-circle);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: center;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

/* 选择器说明：控制首屏观看作品集的播放按钮（鼠标悬停时）的样式。 */
.hero__play:hover {
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--fg);
    /* 中文注释：设置边框颜色。 */
    border-color: var(--fg);
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--ink);
}

/* 选择器说明：控制播放按钮旁的中文说明的样式。 */
.hero__caption {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "丛培伦楷体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(14px, 1.1vw, 16px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 400;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.05em;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制播放按钮旁的英文说明的样式。 */
.hero__caption-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(9px, 0.72vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.16em;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制首屏底部滚动提示的样式。 */
.hero__scroll {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离右边的位置。 */
    right: clamp(24px, 3vw, 40px);
    /* 中文注释：设置定位元素距离下边的位置。 */
    bottom: clamp(20px, 3vh, 32px);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(8px, 1vh, 12px);
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
}

/* 选择器说明：控制滚动提示文字的样式。 */
.hero__scroll-text {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(9px, 0.75vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.15em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: mixed;
}

/* 选择器说明：控制滚动提示的动态细线的样式。 */
.hero__scroll-line {
    /* 中文注释：设置元素宽度。 */
    width: 1px;
    /* 中文注释：设置元素高度。 */
    height: clamp(32px, 4vh, 48px);
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to bottom, var(--fg-2), transparent);
    /* 中文注释：设置关键帧动画名称、时长和播放方式。 */
    animation: scrollFlow 2s ease-in-out infinite;
}

/* 选择器说明：定义“scrollFlow”关键帧动画。 */
@keyframes scrollFlow {
    /* 选择器说明：控制关键帧动画在 0%, 100% 进度时的画面状态。 */
    0%, 100% {
        /* 中文注释：设置整个元素及其内容的透明度。 */
        opacity: 0.3;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateY(-8px);
    }
    /* 选择器说明：控制关键帧动画在 50% 进度时的画面状态。 */
    50% {
        /* 中文注释：设置整个元素及其内容的透明度。 */
        opacity: 1;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateY(0);
    }
}

/* ========================================
   Works Section
   ======================================== */

/* 选择器说明：控制作品展示栏目整体的样式。 */
.works {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: grid;
    /* 中文注释：定义网格每一列的宽度。 */
    grid-template-columns: repeat(5, 1fr);
    /* 中文注释：设置元素高度。 */
    height: clamp(210px, 18.3vh, 220px);
    /* 中文注释：设置元素上边框。 */
    border-top: 1px solid var(--line-soft);
    /* 中文注释：设置元素下边框。 */
    border-bottom: 1px solid var(--line-soft);
}

/* 选择器说明：控制单个作品图片卡片的样式。 */
.works__item {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
    overflow: hidden;
    /* 中文注释：设置元素右边框。 */
    border-right: 1px solid var(--line-soft);
}

/* 选择器说明：控制单个作品图片卡片（最后一个子元素）的样式。 */
.works__item:last-child {
    /* 中文注释：设置元素右边框。 */
    border-right: none;
}

/* 选择器说明：控制作品卡片中的图片的样式。 */
.works__img {
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置图片或视频如何填满固定尺寸的容器。 */
    object-fit: cover;
    /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
    object-position: center;
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: brightness(0.75) saturate(0.85);
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: transform var(--transition-slow), filter var(--transition-slow);
}

/* 选择器说明：控制作品图片上方的渐变遮罩的样式。 */
.works__overlay {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to bottom, rgba(5, 7, 12, 0.2), rgba(5, 7, 12, 0.7));
    /* 中文注释：控制元素是否接收鼠标或触摸事件。 */
    pointer-events: none;
}

/* 选择器说明：控制单个作品图片卡片、作品卡片中的图片（鼠标悬停时）的样式。 */
.works__item:hover .works__img {
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: scale(1.05);
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: brightness(0.9) saturate(1);
}

/* 选择器说明：控制作品图片卡片的排列容器的样式。 */
.works__content {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(16px, 2vw, 24px);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: space-between;
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
}

/* 选择器说明：控制作品栏标题区域的样式。 */
.works__header {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: flex-start;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(8px, 1vw, 12px);
}

/* 选择器说明：控制作品栏中文标题的样式。 */
.works__title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(16px, 1.5vw, 20px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.05em;
}

/* 选择器说明：控制作品栏英文标题的样式。 */
.works__title-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(8px, 0.7vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 200;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.15em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: mixed;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.8;
}

/* 选择器说明：控制作品卡片的可点击链接区域的样式。 */
.works__link {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(10px, 0.85vw, 12px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.05em;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: color var(--transition-base);
}

/* 选择器说明：控制作品卡片的可点击链接区域（鼠标悬停时）的样式。 */
.works__link:hover {
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
}

/* ========================================
   About Section
   ======================================== */

/* 选择器说明：控制“关于我”摄影师介绍栏目整体的样式。 */
.about {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: grid;
    /* 中文注释：定义网格每一列的宽度。 */
    grid-template-columns:
        clamp(56px, 5.5vw, 78px)
        clamp(200px, 19vw, 268px)
        minmax(0, 1fr)
        clamp(230px, 22vw, 310px);
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(18px, 2.4vw, 38px);
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(10px, 1.3vh, 16px) clamp(24px, 3vw, 48px);
    /* 中文注释：限制元素的最小高度。 */
    min-height: clamp(186px, 21.8vh, 240px);
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--ink-2);
    /* 中文注释：设置元素下边框。 */
    border-bottom: 1px solid var(--line-soft);
}

/* 选择器说明：控制“关于我 / ABOUT ME”竖排栏目标题的样式。 */
.about__label {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: flex-start;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(6px, 0.8vw, 10px);
    /* 中文注释：单独设置当前网格元素的水平对齐。 */
    justify-self: center;
}

/* 选择器说明：控制“关于我”中文标题的样式。 */
.about__label-title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(16px, 1.55vw, 21px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.12em;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.35;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: upright;
}

/* 选择器说明：控制“ABOUT ME”英文标题的样式。 */
.about__label-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(7px, 0.6vw, 9px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 200;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.22em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: mixed;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 2;
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(4px, 0.8vh, 8px);
}

/* 选择器说明：控制“关于我”人物背景图区域的样式。 */
.about__figure {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素高度。 */
    height: clamp(150px, 17.5vh, 196px);
    /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
    overflow: hidden;
}

/* 选择器说明：控制“关于我”人物肖像图片的样式。 */
.about__portrait {
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置图片或视频如何填满固定尺寸的容器。 */
    object-fit: cover;
    /* 原片为低调黑白，提亮后人物面部与相机在小尺寸下仍可辨识 */
    /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
    object-position: 58% 26%;
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: grayscale(1) brightness(1.55) contrast(1.18);
}

/* 仅右缘渐隐融入背景，左侧保持人物完整可读 */
/* 选择器说明：控制人物图片上的渐变遮罩的样式。 */
.about__figure-mask {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：一次设置定位元素的上、右、下、左距离。 */
    inset: 0;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(to right, transparent 55%, rgba(14, 14, 15, 0.85) 92%, var(--ink-2) 100%);
    /* 中文注释：控制元素是否接收鼠标或触摸事件。 */
    pointer-events: none;
}

/* 选择器说明：控制摄影师个人简介文字区域的样式。 */
.about__bio {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(4px, 0.6vh, 8px);
    /* 中文注释：限制元素的最小宽度。 */
    min-width: 0;
}

/* 选择器说明：控制摄影师姓名与艺术签名的组合行的样式。 */
.about__bio-header {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(10px, 1.2vw, 18px);
}

/* 选择器说明：控制“摄影师 · 丛培伦”姓名标题的样式。 */
.about__name {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "苏绣体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(20px, 1.9vw, 28px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 500;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.08em;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制个人简介旁的艺术签名图片的样式。 */
.about__signature {
    /* 中文注释：设置元素高度。 */
    height: clamp(42px, 3.8vw, 58px);
    /* 中文注释：设置元素宽度。 */
    width: auto;
    /* 中文注释：设置整个元素及其内容的透明度。 */
    opacity: 0.85;
    /* 签名素材为深底白字，滤镜确保在深色背景上纯净显示 */
    /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
    filter: brightness(1.6) contrast(1.2);
    /* 中文注释：设置元素与下方内容的混合方式。 */
    mix-blend-mode: screen;
}

/* 选择器说明：控制“独立摄影师 / 影像创作者”身份文字的样式。 */
.about__role {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "苏绣体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(12px, 0.82vw, 13px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 500;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: rgba(242, 241, 239, 1);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.06em;
}

/* 选择器说明：控制摄影师个人经历介绍正文的样式。 */
.about__desc {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(11px, 0.92vw, 13px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.72;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.02em;
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(2px, 0.4vh, 5px);
}

/* 选择器说明：控制拍摄年限和项目数量等数据区域的样式。 */
.about__stats {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: flex-end;
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(6px, 0.9vh, 11px);
}

/* 选择器说明：控制单项个人数据的样式。 */
.about__stat {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: 2px;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 0 clamp(14px, 1.8vw, 28px);
    /* 中文注释：设置元素右边框。 */
    border-right: 1px solid var(--line);
}

/* 选择器说明：控制单项个人数据（第一个子元素）的样式。 */
.about__stat:first-child {
    /* 中文注释：设置内容与左边框之间的内间距。 */
    padding-left: 0;
}

/* 选择器说明：控制单项个人数据（最后一个子元素）的样式。 */
.about__stat:last-child {
    /* 中文注释：设置元素右边框。 */
    border-right: none;
    /* 中文注释：设置内容与右边框之间的内间距。 */
    padding-right: 0;
}

/* 选择器说明：控制个人数据中的醒目数字的样式。 */
.about__stat-num {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "苏绣体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(15px, 1.4vw, 19px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.02em;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.2;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制个人数据下方的说明文字的样式。 */
.about__stat-label {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "丛培伦楷体", "KaiTi", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(12px, 0.72vw, 11px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: rgba(242, 241, 239, 0.88);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.04em;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制“真正的摄影……”整组引语的样式。 */
.about__quote {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(8px, 1.2vh, 14px);
    /* 中文注释：设置内容与左边框之间的内间距。 */
    padding-left: clamp(22px, 2.4vw, 36px);
}

/* 细分隔线：与引文等高的竖线 */
/* 选择器说明：控制“真正的摄影……”整组引语（前置装饰伪元素）的样式。 */
.about__quote::before {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '';
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 6%;
    /* 中文注释：设置定位元素距离下边的位置。 */
    bottom: 6%;
    /* 中文注释：设置元素宽度。 */
    width: 1px;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--line);
}

/* 选择器说明：控制引语中的单独一行文字的样式。 */
.about__quote-line {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(26px, 2.4vw, 34px);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 0.5;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置元素高度。 */
    height: clamp(14px, 1.6vh, 20px);
}

/* 选择器说明：控制引语中的单独一行文字（前置装饰伪元素）的样式。 */
.about__quote-line::before {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '\201C';
}

/* 选择器说明：控制引语正文容器的样式。 */
.about__quote-text {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: "丛培伦楷体", var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(22px, 1.75vw, 27px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 600;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.62;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.06em;
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
}

/* 引号与首句同行，不再悬在文字上方。 */
/* 选择器说明：控制引语中的单独一行文字的样式。 */
.about__quote-line {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: none;
}

/* 选择器说明：控制引语正文容器（前置装饰伪元素）的样式。 */
.about__quote-text::before {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: '\201C';
    /* 中文注释：设置文字大小。 */
    font-size: 1.22em;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置元素右侧的外间距。 */
    margin-right: 0.14em;
    /* 中文注释：设置当前元素的“vertical-align”样式参数。 */
    vertical-align: 0.03em;
}

/* 选择器说明：控制引语正文容器（后置装饰伪元素）的样式。 */
.about__quote-text::after {
    /* 中文注释：为伪元素生成文字或装饰内容。 */
    content: none;
}

/* 结束引号直接放在“远方”后，向上提到同一行的右上角。 */
/* 选择器说明：控制引语末尾的结束引号的样式。 */
.about__quote-close {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: inline-block;
    /* 中文注释：设置文字大小。 */
    font-size: calc(0.86em + 15px);
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置元素左侧的外间距。 */
    margin-left: 0.12em;
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: -0.18em;
    /* 以当前1536px桌面画布为准，右移19px到用户指定x=1440.05。 */
    /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
    transform: translateX(19px);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1;
}

/* 三行文字逐行推进半个字身位，避免机械的齐头排版。 */
/* 选择器说明：控制引语错落缩进的通用规则的样式。 */
.about__quote-indent {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: inline-block;
}

/* 选择器说明：控制引语第一档缩进的样式。 */
.about__quote-indent--one {
    /* 明显落在首句正文右侧，保留半字推进关系。 */
    /* 中文注释：设置元素左侧的外间距。 */
    margin-left: 2.7em;
}

/* 选择器说明：控制引语第二档缩进的样式。 */
.about__quote-indent--two {
    /* 第三句再向右推进半个字；连同结束引号保持同一行。 */
    /* 中文注释：设置元素左侧的外间距。 */
    margin-left: 3.2em;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* ========================================
   Story Section
   ======================================== */

/* 选择器说明：控制“光影故事”栏目整体的样式。 */
.story {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: clamp(150px, 17.6vh, 210px);
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: grid;
    /* 中文注释：定义网格每一列的宽度。 */
    grid-template-columns: 1fr auto;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 0 clamp(40px, 6vw, 88px);
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(48px, 8vw, 120px);
    /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
    overflow: hidden;
    /* 中文注释：设置元素下边框。 */
    border-bottom: 1px solid var(--line-soft);
}

/* 选择器说明：控制“光影故事”背景图片的样式。 */
.story__bg {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置图片或视频如何填满固定尺寸的容器。 */
    object-fit: cover;
    /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
    object-position: center 45%;
}

/* 选择器说明：控制“光影故事”图片上的渐变遮罩的样式。 */
.story__overlay {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: absolute;
    /* 中文注释：设置定位元素距离上边的位置。 */
    top: 0;
    /* 中文注释：设置定位元素距离左边的位置。 */
    left: 0;
    /* 中文注释：设置元素宽度。 */
    width: 100%;
    /* 中文注释：设置元素高度。 */
    height: 100%;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: linear-gradient(
        to right,
        rgba(5, 7, 12, 0.92) 0%,
        rgba(10, 13, 18, 0.85) 40%,
        rgba(15, 19, 28, 0.75) 70%,
        rgba(22, 29, 43, 0.7) 100%
    );
}

/* 选择器说明：控制“光影故事”正文内容容器的样式。 */
.story__content {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(10px, 1.2vh, 14px);
    /* 中文注释：限制元素的最大宽度。 */
    max-width: clamp(380px, 40vw, 520px);
}

/* 选择器说明：控制“光影故事”中文主标题的样式。 */
.story__title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(28px, 3vw, 40px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.08em;
}

/* 选择器说明：控制“光影故事”副标题的样式。 */
.story__subtitle {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(10px, 0.9vw, 13px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 200;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.15em;
}

/* 选择器说明：控制“光影故事”介绍正文的样式。 */
.story__text {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(13px, 1.1vw, 15px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.8;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.02em;
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(4px, 0.5vh, 6px);
}

/* 选择器说明：控制“光影故事”中的行动按钮的样式。 */
.story__btn {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: inline-flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: center;
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(10px, 1.2vh, 14px) clamp(24px, 2.8vw, 36px);
    /* 中文注释：设置元素四周边框的粗细、样式和颜色。 */
    border: 1px solid var(--fg-2);
    /* 中文注释：设置元素圆角大小。 */
    border-radius: var(--radius-pill);
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(13px, 1.1vw, 15px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.03em;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    /* 中文注释：设置元素上方的外间距。 */
    margin-top: clamp(8px, 1vh, 12px);
    /* 中文注释：单独设置当前元素在交叉轴方向的对齐。 */
    align-self: flex-start;
}

/* 选择器说明：控制“光影故事”中的行动按钮（鼠标悬停时）的样式。 */
.story__btn:hover {
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--fg);
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--ink);
    /* 中文注释：设置边框颜色。 */
    border-color: var(--fg);
}

/* 选择器说明：控制创作流程步骤排列区域的样式。 */
.story__steps {
    /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
    position: relative;
    /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
    z-index: 10;
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(32px, 4.5vw, 64px);
}

/* 选择器说明：控制单个创作流程步骤的样式。 */
.story__step {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(8px, 1vh, 12px);
}

/* 选择器说明：控制流程步骤中文标题的样式。 */
.story__step-title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(18px, 1.8vw, 24px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.08em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: upright;
}

/* 选择器说明：控制流程步骤英文说明的样式。 */
.story__step-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(9px, 0.75vw, 11px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 200;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.2em;
    /* 中文注释：设置文字横排或竖排方向。 */
    writing-mode: vertical-rl;
    /* 中文注释：设置竖排文字中字符的朝向。 */
    text-orientation: mixed;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.8;
}

/* ========================================
   Footer
   ======================================== */

/* 选择器说明：控制网页底部页脚整体的样式。 */
.footer {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--ink-3);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: 0 clamp(24px, 3vw, 48px);
}

/* 选择器说明：控制页脚主要内容区域的样式。 */
.footer__main {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(24px, 3.5vw, 56px);
    /* 中文注释：限制元素的最小高度。 */
    min-height: clamp(67px, 7.9vh, 92px);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(12px, 1.8vh, 20px) 0;
}

/* 选择器说明：控制页脚品牌标语的样式。 */
.footer__slogan {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置弹性子元素横向或纵向排列。 */
    flex-direction: column;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(2px, 0.5vh, 5px);
    /* 中文注释：设置文字的水平对齐方式。 */
    text-align: center;
}

/* 选择器说明：控制页脚主标题的样式。 */
.footer__title {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(19px, 1.85vw, 26px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.22em;
    /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
    line-height: 1.3;
}

/* 选择器说明：控制页脚副标题的样式。 */
.footer__subtitle {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(8px, 0.68vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 200;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.34em;
}

/* 选择器说明：控制页脚联系或行动按钮的样式。 */
.footer__btn {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: inline-flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(8px, 1vw, 14px);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(9px, 1.2vh, 13px) clamp(20px, 2.2vw, 30px);
    /* 中文注释：设置元素四周边框的粗细、样式和颜色。 */
    border: 1px solid var(--line);
    /* 中文注释：设置元素圆角大小。 */
    border-radius: var(--radius-pill);
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-2);
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
    /* 中文注释：设置属性变化时的过渡动画及速度曲线。 */
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* 选择器说明：控制页脚联系或行动按钮（鼠标悬停时）的样式。 */
.footer__btn:hover {
    /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
    background: var(--fg);
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--ink);
    /* 中文注释：设置边框颜色。 */
    border-color: var(--fg);
}

/* 选择器说明：控制页脚按钮中文文字的样式。 */
.footer__btn-cn {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--serif);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(12px, 1vw, 14px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.08em;
}

/* 选择器说明：控制页脚按钮英文文字的样式。 */
.footer__btn-en {
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(8px, 0.68vw, 10px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.18em;
    /* 中文注释：设置整个元素及其内容的透明度。 */
    opacity: 0.7;
}

/* 选择器说明：控制页脚按钮箭头的样式。 */
.footer__btn-arrow {
    /* 中文注释：设置文字大小。 */
    font-size: clamp(11px, 0.9vw, 13px);
    /* 中文注释：设置整个元素及其内容的透明度。 */
    opacity: 0.7;
}

/* 选择器说明：控制页脚最底部版权信息区域的样式。 */
.footer__bottom {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: flex;
    /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
    justify-content: space-between;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: clamp(12px, 2vw, 24px);
    /* 中文注释：设置内容与边框之间四周的内间距。 */
    padding: clamp(8px, 1.2vh, 14px) 0 clamp(10px, 1.5vh, 16px);
    /* 中文注释：设置元素上边框。 */
    border-top: 1px solid var(--line-soft);
    /* 中文注释：设置文字使用的字体及备用字体。 */
    font-family: var(--sans);
    /* 中文注释：设置文字大小。 */
    font-size: clamp(9px, 0.72vw, 11px);
    /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
    font-weight: 300;
    /* 中文注释：设置文字或图标的颜色与透明度。 */
    color: var(--fg-3);
    /* 中文注释：设置字符之间的距离。 */
    letter-spacing: 0.03em;
}

/* 选择器说明：控制页脚ICP备案号链接的外观。 */
.footer__beian {
    /* 中文注释：沿用页脚文字颜色，避免备案信息显得突兀。 */
    color: inherit;
    /* 中文注释：备案号默认不显示下划线。 */
    text-decoration: none;
    /* 中文注释：鼠标经过时平滑提亮。 */
    transition: color var(--transition-base);
}

/* 选择器说明：控制鼠标经过ICP备案号时的提示效果。 */
.footer__beian:hover {
    /* 中文注释：悬停时提亮，提示备案号可以点击。 */
    color: var(--fg-2);
}

/* 选择器说明：控制页脚中的所在地信息的样式。 */
.footer__loc {
    /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
    display: inline-flex;
    /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
    align-items: center;
    /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
    gap: 6px;
    /* 中文注释：控制空格保留和文字换行方式。 */
    white-space: nowrap;
}

/* 选择器说明：控制页脚中的所在地信息的样式。 */
.footer__loc svg {
    /* 中文注释：设置元素在弹性布局中的伸缩比例和基础尺寸。 */
    flex: none;
    /* 中文注释：设置整个元素及其内容的透明度。 */
    opacity: 0.7;
}

/* ========================================
   Responsive - Tablet (769px - 1279px)
   ======================================== */

/* 选择器说明：以下样式只在不超过指定宽度的屏幕上生效，用于移动端或小屏适配。 */
@media (max-width: 1279px) and (min-width: 769px) {
    /* 选择器说明：控制顶部导航菜单列表的样式。 */
    .nav__menu {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* 选择器说明：控制移动端导航菜单按钮的样式。 */
    .nav__hamburger {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: flex;
    }

    /* 选择器说明：控制首页首屏主视觉区域的样式。 */
    .hero {
        /* 中文注释：设置元素高度。 */
        height: clamp(320px, 42vh, 450px);
    }

    /* 选择器说明：控制首屏左侧中英文主标题组合的样式。 */
    .hero__titles {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: clamp(60px, 6.5vw, 88px);
    }

    /* 选择器说明：控制首屏中文主标题的通用样式的样式。 */
    .hero__title {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(22px, 3vw, 30px);
    }

    /* 选择器说明：控制首屏右侧介绍文案和观看作品按钮组合的样式。 */
    .hero__content {
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: clamp(36px, 4.5vw, 56px);
    }

    /* 选择器说明：控制作品展示栏目整体的样式。 */
    .works {
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: repeat(3, 1fr);
        /* 中文注释：定义网格每一行的高度。 */
        grid-template-rows: repeat(2, 1fr);
        /* 中文注释：设置元素高度。 */
        height: auto;
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(280px, 36vh, 400px);
    }

    /* 选择器说明：控制单个作品图片卡片（指定序号的子元素）的样式。 */
    .works__item:nth-child(4) {
        /* 中文注释：设置元素横跨哪些网格行。 */
        grid-row: 2;
    }

    /* 选择器说明：控制横向加宽的作品图片卡片的样式。 */
    .works__item--wide {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 2 / 4;
        /* 中文注释：设置元素横跨哪些网格行。 */
        grid-row: 2;
    }

    /* 选择器说明：控制“关于我”摄影师介绍栏目整体的样式。 */
    .about {
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: clamp(70px, 7vw, 90px) clamp(180px, 20vw, 240px) 1fr;
        /* 中文注释：定义网格每一行的高度。 */
        grid-template-rows: auto auto;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: clamp(36px, 5vh, 52px) clamp(28px, 4vw, 48px);
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(320px, 40vh, 420px);
    }

    /* 选择器说明：控制“关于我”人物背景图区域的样式。 */
    .about__figure {
        /* 中文注释：设置元素横跨哪些网格行。 */
        grid-row: 1;
    }

    /* 选择器说明：控制摄影师个人简介文字区域的样式。 */
    .about__bio {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 3;
        /* 中文注释：设置元素横跨哪些网格行。 */
        grid-row: 1;
    }

    /* 选择器说明：控制“真正的摄影……”整组引语的样式。 */
    .about__quote {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 1 / -1;
        /* 中文注释：设置元素横跨哪些网格行。 */
        grid-row: 2;
        /* 中文注释：设置内容与左边框之间的内间距。 */
        padding-left: 0;
        /* 中文注释：设置内容与上边框之间的内间距。 */
        padding-top: clamp(20px, 2.6vh, 30px);
        /* 中文注释：设置元素上方的外间距。 */
        margin-top: clamp(16px, 2.2vh, 26px);
    }

    /* 选择器说明：控制“真正的摄影……”整组引语（前置装饰伪元素）的样式。 */
    .about__quote::before {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: 0;
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: 0;
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: 0;
        /* 中文注释：设置定位元素距离下边的位置。 */
        bottom: auto;
        /* 中文注释：设置元素宽度。 */
        width: auto;
        /* 中文注释：设置元素高度。 */
        height: 1px;
    }

    /* 选择器说明：控制“光影故事”栏目整体的样式。 */
    .story {
        /* 中文注释：设置元素高度。 */
        height: clamp(200px, 26vh, 280px);
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0 clamp(32px, 4.5vw, 64px);
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(40px, 6vw, 80px);
    }
}

/* ========================================
   Responsive - Mobile (≤ 768px)
   ======================================== */

/* 选择器说明：以下样式只在不超过指定宽度的屏幕上生效，用于移动端或小屏适配。 */
@media (max-width: 768px) {
    /* 选择器说明：控制顶部导航菜单列表的样式。 */
    .nav__menu {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* 选择器说明：控制移动端导航菜单按钮的样式。 */
    .nav__hamburger {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: flex;
    }

    /* 选择器说明：控制导航栏中的暂停按钮的样式。 */
    .nav__pause {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* ---- Hero ---- */
    /* 选择器说明：控制首页首屏主视觉区域的样式。 */
    .hero {
        /* 中文注释：设置元素高度。 */
        height: auto;
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(560px, 92svh, 720px);
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: relative;
        /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
        overflow: hidden;
    }

    /* 选择器说明：控制首屏背景主图及其取景方式的样式。 */
    .hero__bg {
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: absolute;
        /* 中文注释：一次设置定位元素的上、右、下、左距离。 */
        inset: 0;
        /* 中文注释：设置元素宽度。 */
        width: 100%;
        /* 中文注释：设置元素高度。 */
        height: 100%;
        /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
        object-position: 58% center;
    }

    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩的样式。 */
    .hero__overlay {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(
            to bottom,
            rgba(5, 7, 12, 0.46) 0%,
            rgba(8, 10, 16, 0.22) 28%,
            rgba(10, 13, 18, 0.42) 60%,
            rgba(5, 7, 12, 0.72) 100%
        );
    }

    /* 选择器说明：减轻手机端首屏顶部附加暗层，让天空、肤色和发丝恢复通透感。 */
    .hero__overlay::before {
        background: linear-gradient(to bottom, rgba(5, 7, 12, 0.20), transparent);
    }

    /* 选择器说明：保留底部白字所需的局部保护，同时避免整张照片被黑灰遮罩压住。 */
    .hero__overlay::after {
        background: linear-gradient(to top, rgba(5, 7, 12, 0.30), transparent);
    }

    /* 社交图标竖排贴左 */
    /* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
    .hero__social {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: auto;
        /* 中文注释：将社交入口移到手机端右侧，避开人物面部。 */
        right: clamp(16px, 4.5vw, 22px);
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: clamp(80px, 12vh, 100px);
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: none;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(18px, 3vh, 26px);
        /* 中文注释：设置弹性子元素横向或纵向排列。 */
        flex-direction: column;
    }

    /* 选择器说明：手机端把装饰竖线放在主标题与右侧社交图标之间。 */
    .hero__social::after {
        left: auto;
        right: calc(100% + clamp(8px, 2.5vw, 12px));
        height: clamp(132px, 24vh, 178px);
    }

    /* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
    .hero__social a {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: flex;
        /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
        align-items: center;
        /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
        justify-content: center;
        /* 中文注释：设置元素宽度。 */
        width: 44px;
        /* 中文注释：设置元素高度。 */
        height: 44px;
        /* 中文注释：设置元素外侧四周的间距。 */
        margin: -12px;
    }

    /* 标题绝对定位在社交图标右侧 */
    /* 选择器说明：控制首屏左侧中英文主标题组合的样式。 */
    .hero__titles {
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: absolute;
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: auto;
        /* 中文注释：将竖排主标题移到手机端右侧，减少对人物主体的遮挡。 */
        right: clamp(70px, 18vw, 92px);
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: clamp(88px, 13.5vh, 112px);
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: none;
        /* 中文注释：限制元素的最大高度。 */
        max-height: none;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(3px, 1vw, 6px);
        /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
        z-index: 10;
    }

    /* 选择器说明：控制首屏中文主标题的通用样式的样式。 */
    .hero__title {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(28px, 7.5vw, 38px);
    }

    /* 选择器说明：控制首屏英文竖排标题的样式。 */
    .hero__title-en {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(7px, 1.8vw, 9px);
        /* 中文注释：设置元素左侧的外间距。 */
        margin-left: 0;
        margin-right: clamp(5px, 1.6vw, 8px);
        order: -1;
    }

    /* 文案在 Hero 下半部左对齐 */
    /* 选择器说明：控制首屏右侧介绍文案和观看作品按钮组合的样式。 */
    .hero__content {
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: absolute;
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: clamp(24px, 6.5vw, 36px);
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: clamp(24px, 6.5vw, 36px);
        /* 中文注释：设置定位元素距离下边的位置。 */
        bottom: clamp(48px, 8.5vh, 72px);
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: auto;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: none;
        /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
        align-items: flex-start;
        /* 中文注释：设置文字的水平对齐方式。 */
        text-align: left;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(10px, 1.8vh, 14px);
    }

    /* 选择器说明：控制首屏右侧三行中文介绍文案的样式。 */
    .hero__text {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(15px, 4.2vw, 19px);
        /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
        line-height: 1.72;
    }

    /* 选择器说明：控制首屏观看作品集按钮区域的样式。 */
    .hero__cta {
        /* 中文注释：设置弹性子元素空间不足时是否换行。 */
        flex-wrap: wrap;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(10px, 2.5vw, 16px);
    }

    /* 选择器说明：控制首屏底部滚动提示的样式。 */
    .hero__scroll {
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: clamp(18px, 4.5vw, 26px);
        /* 中文注释：设置定位元素距离下边的位置。 */
        bottom: clamp(14px, 2.5vh, 22px);
    }

    /* ---- Works ---- */
    /* 选择器说明：控制作品展示栏目整体的样式。 */
    .works {
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: repeat(2, 1fr);
        /* 中文注释：定义网格每一行的高度。 */
        grid-template-rows: repeat(3, 1fr);
        /* 中文注释：设置元素高度。 */
        height: auto;
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(480px, 64vh, 580px);
    }

    /* 选择器说明：控制单个作品图片卡片的样式。 */
    .works__item {
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(155px, 21vh, 195px);
    }

    /* 选择器说明：手机端作品缩略图降低统一压暗程度，恢复高光、色彩与空气感。 */
    .works__img {
        filter: brightness(0.94) saturate(0.96);
    }

    /* 选择器说明：触屏浏览器可能保留伪悬停状态，手机端禁止它把刚提亮的照片重新压暗。 */
    .works__item:hover .works__img {
        transform: none;
        filter: brightness(0.94) saturate(0.96);
    }

    /* 选择器说明：作品卡片只在标题和底部入口附近保留柔和渐变，不再整图重压黑。 */
    .works__overlay {
        background: linear-gradient(to bottom, rgba(5, 7, 12, 0.10), rgba(5, 7, 12, 0.46));
    }

    /* 选择器说明：商业原图本身采用低调布光，手机小卡片单独提亮以显出相机和双手。 */
    .works__item--wide .works__img,
    .works__item:nth-child(5) .works__img {
        object-position: 52% 47%;
        filter: brightness(1.25) contrast(1.12) saturate(1);
    }

    /* 选择器说明：商业卡在手机触屏伪悬停时仍保持专属的暗部提亮参数。 */
    .works__item--wide:hover .works__img,
    .works__item:nth-child(5):hover .works__img {
        transform: none;
        filter: brightness(1.25) contrast(1.12) saturate(1);
    }

    /* 选择器说明：商业卡保留深黑背景，但进一步减轻覆盖层，让相机与双手在手机上能够直接辨认。 */
    .works__item--wide .works__overlay,
    .works__item:nth-child(5) .works__overlay {
        background: linear-gradient(to bottom, rgba(5, 7, 12, 0.04), rgba(5, 7, 12, 0.30));
    }

    /* 第5张横跨整行 */
    .works__item--wide,
    /* 选择器说明：控制单个作品图片卡片（指定序号的子元素）的样式。 */
    .works__item:nth-child(5) {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 1 / -1;
    }

    /* ---- About ---- */
    /* 选择器说明：控制“关于我”摄影师介绍栏目整体的样式。 */
    .about {
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: 1fr;
        /* 中文注释：定义网格每一行的高度。 */
        grid-template-rows: auto;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(22px, 4vh, 34px);
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: clamp(32px, 5.5vh, 48px) clamp(22px, 6vw, 30px);
        /* 中文注释：限制元素的最小高度。 */
        min-height: auto;
    }

    /* 选择器说明：控制“关于我 / ABOUT ME”竖排栏目标题的样式。 */
    .about__label {
        /* 中文注释：设置弹性子元素横向或纵向排列。 */
        flex-direction: row;
        /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
        align-items: center;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(12px, 3.5vw, 18px);
        /* 中文注释：单独设置当前网格元素的水平对齐。 */
        justify-self: start;
    }

    /* 选择器说明：控制“关于我”中文标题的样式。 */
    .about__label-title {
        /* 中文注释：设置文字横排或竖排方向。 */
        writing-mode: horizontal-tb;
        /* 中文注释：设置竖排文字中字符的朝向。 */
        text-orientation: mixed;
        /* 中文注释：设置文字大小。 */
        font-size: clamp(22px, 5.5vw, 28px);
        /* 中文注释：设置字符之间的距离。 */
        letter-spacing: 0.08em;
    }

    /* 选择器说明：控制“ABOUT ME”英文标题的样式。 */
    .about__label-en {
        /* 中文注释：设置文字横排或竖排方向。 */
        writing-mode: horizontal-tb;
        /* 中文注释：设置竖排文字中字符的朝向。 */
        text-orientation: mixed;
        /* 中文注释：设置文字大小。 */
        font-size: clamp(9px, 2.2vw, 12px);
        /* 中文注释：设置字符之间的距离。 */
        letter-spacing: 0.16em;
    }

    /* 选择器说明：控制“关于我”人物背景图区域的样式。 */
    .about__figure {
        /* 中文注释：设置元素宽度。 */
        width: 100%;
        /* 中文注释：设置元素高度。 */
        height: clamp(200px, 30vh, 280px);
    }

    /* 选择器说明：控制“关于我”人物肖像图片的样式。 */
    .about__portrait {
        /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
        object-position: 50% 24%;
        /* 中文注释：设置图片或元素的亮度、饱和度、模糊等滤镜。 */
        filter: grayscale(1) brightness(1.72) contrast(1.10);
    }

    /* 选择器说明：控制人物图片上的渐变遮罩的样式。 */
    .about__figure-mask {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(to bottom, transparent 64%, rgba(14, 14, 15, 0.38) 90%, rgba(14, 14, 15, 0.72) 100%);
    }

    /* 选择器说明：手机端简介取消桌面端人为断行，按屏幕宽度自然排成一段话。 */
    .about__desc br {
        display: none;
    }

    /* 选择器说明：控制拍摄年限和项目数量等数据区域的样式。 */
    .about__stats {
        /* 中文注释：移动端改用严格对称的两列网格，让中线与左右文字保持相同距离。 */
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
        /* 中文注释：设置各行之间的间距。 */
        row-gap: clamp(14px, 2.5vh, 20px);
    }

    /* 选择器说明：在移动端数据区几何中心绘制独立分隔线，不再让线贴住右列文字。 */
    .about__stats::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--line);
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* 选择器说明：控制单项个人数据的样式。 */
    .about__stat {
        /* 中文注释：限制元素的最小宽度。 */
        min-width: 0;
        /* 中文注释：让数字和说明在各自半区内居中，中央分隔线两侧形成对称留白。 */
        align-items: center;
        text-align: center;
        /* 中文注释：网格间距已留出对称呼吸区，单项不再携带边框和额外内边距。 */
        padding: 0;
        border-right: 0;
    }

    /* 两列布局：每行第二项取消右侧分隔线 */
    /* 选择器说明：控制单项个人数据（指定序号的子元素）的样式。 */
    .about__stat:nth-child(2n) {
        /* 中文注释：设置元素右边框。 */
        border-right: none;
    }

    /* 选择器说明：控制“真正的摄影……”整组引语的样式。 */
    .about__quote {
        /* 中文注释：设置内容与左边框之间的内间距。 */
        padding-left: 0;
        /* 中文注释：设置内容与上边框之间的内间距。 */
        padding-top: clamp(20px, 3.5vh, 30px);
    }

    /* 选择器说明：控制“真正的摄影……”整组引语（前置装饰伪元素）的样式。 */
    .about__quote::before {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: 0;
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: 0;
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: 0;
        /* 中文注释：设置定位元素距离下边的位置。 */
        bottom: auto;
        /* 中文注释：设置元素宽度。 */
        width: auto;
        /* 中文注释：设置元素高度。 */
        height: 1px;
    }

    /* ---- Story ---- */
    /* 选择器说明：控制“光影故事”栏目整体的样式。 */
    .story {
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: 1fr;
        /* 中文注释：定义网格每一行的高度。 */
        grid-template-rows: auto auto;
        /* 中文注释：设置元素高度。 */
        height: auto;
        /* 中文注释：限制元素的最小高度。 */
        min-height: clamp(340px, 48vh, 460px);
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: clamp(36px, 6vh, 52px) clamp(22px, 6vw, 30px);
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(28px, 5vh, 44px);
    }

    /* 选择器说明：减轻手机端光影故事的整屏黑层，保留夜景气氛并找回光环与地面倒影。 */
    .story__overlay {
        background: linear-gradient(to right,
            rgba(5, 7, 12, 0.68) 0%,
            rgba(10, 13, 18, 0.56) 40%,
            rgba(15, 19, 28, 0.48) 70%,
            rgba(22, 29, 43, 0.42) 100%);
    }

    /* 选择器说明：控制“光影故事”正文内容容器的样式。 */
    .story__content {
        /* 中文注释：限制元素的最大宽度。 */
        max-width: 100%;
    }

    /* 选择器说明：控制创作流程步骤排列区域的样式。 */
    .story__steps {
        /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
        justify-content: center;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(24px, 8vw, 48px);
    }

    /* 选择器说明：控制流程步骤中文标题的样式。 */
    .story__step-title {
        /* 中文注释：设置文字横排或竖排方向。 */
        writing-mode: horizontal-tb;
        /* 中文注释：设置竖排文字中字符的朝向。 */
        text-orientation: mixed;
        /* 中文注释：设置文字大小。 */
        font-size: clamp(17px, 4.5vw, 22px);
    }

    /* 选择器说明：控制流程步骤英文说明的样式。 */
    .story__step-en {
        /* 中文注释：设置文字横排或竖排方向。 */
        writing-mode: horizontal-tb;
        /* 中文注释：设置竖排文字中字符的朝向。 */
        text-orientation: mixed;
        /* 中文注释：设置文字大小。 */
        font-size: clamp(8px, 2vw, 11px);
        /* 中文注释：设置字符之间的距离。 */
        letter-spacing: 0.16em;
    }

    /* ---- Footer ---- */
    /* 选择器说明：控制网页底部页脚整体的样式。 */
    .footer {
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0 clamp(20px, 6vw, 28px);
    }

    /* 选择器说明：控制页脚主要内容区域的样式。 */
    .footer__main {
        /* 中文注释：设置弹性子元素横向或纵向排列。 */
        flex-direction: column;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(16px, 3vh, 24px);
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: clamp(28px, 5vh, 40px) 0;
    }

    /* 选择器说明：控制页脚最底部版权信息区域的样式。 */
    .footer__bottom {
        /* 中文注释：设置弹性子元素横向或纵向排列。 */
        flex-direction: column;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: clamp(8px, 1.5vh, 12px);
        /* 中文注释：设置文字的水平对齐方式。 */
        text-align: center;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: clamp(14px, 2.2vh, 18px) 0 clamp(18px, 2.8vh, 24px);
    }

    /* 最小点击区域 44px */
    .nav__link,
    .works__link,
    .story__btn,
    .footer__btn,
    /* 选择器说明：控制首屏观看作品集的播放按钮的样式。 */
    .hero__play {
        /* 中文注释：限制元素的最小高度。 */
        min-height: 44px;
        /* 中文注释：限制元素的最小宽度。 */
        min-width: 44px;
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: inline-flex;
        /* 中文注释：设置子元素在交叉轴方向的对齐方式。 */
        align-items: center;
        /* 中文注释：设置子元素在主轴方向的对齐和分布。 */
        justify-content: center;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

/* 选择器说明：以下样式在用户要求减少动画时生效，提升可访问性。 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* 中文注释：设置动画持续时间。 */
        animation-duration: 0.01ms !important;
        /* 中文注释：设置当前元素的“animation-iteration-count”样式参数。 */
        animation-iteration-count: 1 !important;
        /* 中文注释：设置过渡动画持续时间。 */
        transition-duration: 0.01ms !important;
        /* 中文注释：设置页面滚动是否采用平滑动画。 */
        scroll-behavior: auto !important;
    }

    /* 选择器说明：控制滚动提示的动态细线的样式。 */
    .hero__scroll-line {
        /* 中文注释：设置关键帧动画名称、时长和播放方式。 */
        animation: none;
    }
}

/* ========================================
   Print Styles
   ======================================== */

/* 选择器说明：以下样式只在指定设备或屏幕条件下生效。 */
@media print {
    .nav,
    .hero__play,
    .hero__scroll,
    .works__link,
    .story__btn,
    /* 选择器说明：控制页脚联系或行动按钮的样式。 */
    .footer__btn {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* 选择器说明：控制网页正文整体的基础样式。 */
    body {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: white;
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: black;
    }
}

/* ========================================
   1536 × 1024 reference composition
   The desktop reference is intentionally a compact, single-screen editorial
   spread.  These late rules only tighten the large-screen composition; the
   tablet/mobile layout above remains unchanged.
   ======================================== */
/* 选择器说明：以下样式只在达到指定宽度的屏幕上生效，用于桌面端适配。 */
@media (min-width: 1280px) {
    /* Hero 保留通透的云海与日光，仅在文字区施加轻薄保护层。 */
    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩的样式。 */
    .hero__overlay {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(
            to right,
            rgba(8, 14, 20, 0.34) 0%,
            rgba(10, 16, 22, 0.20) 27%,
            rgba(14, 20, 26, 0.10) 55%,
            rgba(18, 24, 30, 0.06) 100%
        );
    }

    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩（前置装饰伪元素）的样式。 */
    .hero__overlay::before {
        /* 中文注释：设置元素高度。 */
        height: 24%;
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(to bottom, rgba(5, 7, 12, 0.18), transparent);
    }

    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩（后置装饰伪元素）的样式。 */
    .hero__overlay::after {
        /* 中文注释：设置元素高度。 */
        height: 20%;
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(to top, rgba(5, 7, 12, 0.20), transparent);
    }

    /* 选择器说明：控制首屏左侧中英文主标题组合的样式。 */
    .hero__titles {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: 14.3vw;
    }

    /* 选择器说明：控制首屏右侧介绍文案和观看作品按钮组合的样式。 */
    .hero__content {
        /* 中文注释：设置定位元素距离右边的位置。 */
        right: 12%;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateY(-50%);
    }

    /* 选择器说明：控制首屏右侧三行中文介绍文案的样式。 */
    .hero__text {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(19px, 1.35vw, 21px);
        /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
        line-height: 1.72;
        /* 右侧云层很亮，改用深色文字而不是白字硬压在高光上。 */
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: #17191b;
        /* 中文注释：给文字添加阴影以增强层次或可读性。 */
        text-shadow: 0 1px 14px rgba(255, 255, 255, 0.38);
    }

    /* 选择器说明：控制首屏右侧文案前的短分隔线的样式。 */
    .hero__divider {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: #17191b;
    }

    /* 选择器说明：控制首屏观看作品集的播放按钮的样式。 */
    .hero__play {
        /* 中文注释：设置边框颜色。 */
        border-color: #17191b;
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: #17191b;
    }

    /* 选择器说明：控制播放按钮旁的中文说明的样式。 */
    .hero__caption {
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: #17191b;
    }

    /* 选择器说明：控制播放按钮旁的英文说明的样式。 */
    .hero__caption-en {
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: rgba(23, 25, 27, 0.68);
    }

    /* 选择器说明：控制“关于我”摄影师介绍栏目整体的样式。 */
    .about {
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: relative;
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: grid;
        /* 中文注释：定义网格每一列的宽度。 */
        grid-template-columns: 37.5% 31.5% 31%;
        /* 中文注释：设置弹性或网格子元素之间的统一间距。 */
        gap: 0;
        /* 中文注释：设置元素高度。 */
        height: 35vh;
        /* 中文注释：限制元素的最小高度。 */
        min-height: 0;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0;
        /* 中文注释：控制内容超出元素边界时是隐藏、滚动还是显示。 */
        overflow: hidden;
        /* 这张横幅正好是参考图的“人物贯穿数值栏下方”的底层构图。 */
        /* 中文注释：设置背景颜色。 */
        background-color: var(--ink-2);
        /* 中文注释：设置背景图片或渐变。 */
        background-image: url('06_About_摄影师横幅_高清.png');
        /* 中文注释：设置背景图片是否重复平铺。 */
        background-repeat: no-repeat;
        /* 中文注释：设置背景图片的缩放方式。 */
        background-size: cover;
        /* 中文注释：设置背景图片在容器中的取景位置。 */
        background-position: center 0%;

    }

    /* 选择器说明：控制“关于我 / ABOUT ME”竖排栏目标题的样式。 */
    .about__label {
        /* 中文注释：设置元素采用普通、相对、绝对、固定或吸附定位。 */
        position: absolute;
        /* 中文注释：设置元素的前后叠放层级，数值越大越靠前。 */
        z-index: 2;
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: 5.1vw;
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: 50%;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateY(-50%);
    }

    /* 选择器说明：控制“关于我”人物背景图区域的样式。 */
    .about__figure {
        /* 横幅已在 .about 作为完整底图渲染，不能再盖上一张独立渐变肖像。 */
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* 选择器说明：控制“关于我”人物肖像图片的样式。 */
    .about__portrait {
        /* 中文注释：设置图片或视频在裁切框中的取景位置。 */
        object-position: 58% 27%;
    }

    /* 选择器说明：控制摄影师个人简介文字区域的样式。 */
    .about__bio {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 2;
        /* 中文注释：单独设置当前元素在交叉轴方向的对齐。 */
        align-self: center;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0 2.2vw 0 1.1vw;

        /* 整个简介组一起放大 */
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateX(-80px) scale(1.4);
        /* 中文注释：设置缩放或旋转时的中心基点。 */
        transform-origin: left center;
    }

    /* 选择器说明：控制摄影师个人经历介绍正文的样式。 */
    .about__desc {
        /* 中文注释：设置文字大小。 */
        font-size: clamp(12px, .78vw, 12px);
        /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
        line-height: 1.55;
    }

    /* 选择器说明：控制拍摄年限和项目数量等数据区域的样式。 */
    .about__stats {
        /* 中文注释：设置元素上方的外间距。 */
        margin-top: 7px;
    }

    /* 选择器说明：控制单项个人数据的样式。 */
    .about__stat {
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0 1.35vw;
    }

    /* 选择器说明：控制“真正的摄影……”整组引语的样式。 */
    .about__quote {
        /* 中文注释：设置元素横跨哪些网格列。 */
        grid-column: 3;
        /* 中文注释：单独设置当前元素在交叉轴方向的对齐。 */
        align-self: center;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0 2.6vw;
        /* 给“远方”后的结束引号留出右侧呼吸位。 */
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: translateX(-64px);
    }

    /* 选择器说明：控制“真正的摄影……”整组引语（前置装饰伪元素）的样式。 */
    .about__quote::before {
        /* 中文注释：设置元素的布局类型，例如块级、弹性布局或网格布局。 */
        display: none;
    }

    /* 选择器说明：控制引语正文容器的样式。 */
    .about__quote-text {
        /* 右侧引语微调到 30px，保持气势但不压画面。 */
        /* 中文注释：设置文字大小。 */
        font-size: 30px;
        /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
        font-weight: 600;
        /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
        line-height: 1.28;
    }

    /* 选择器说明：控制页脚主要内容区域的样式。 */
    .footer__main {
        /* 中文注释：限制元素的最小高度。 */
        min-height: 0;
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 0;
    }

    /* 选择器说明：控制页脚最底部版权信息区域的样式。 */
    .footer__bottom {
        /* 中文注释：设置内容与边框之间四周的内间距。 */
        padding: 1px 0 2px;
    }
}

/* 用户确认版：仅放大 Hero 右侧文字与观看作品集组件 */
/* 选择器说明：以下样式只在达到指定宽度的屏幕上生效，用于桌面端适配。 */
@media (min-width: 1280px) {
    /* 中文注释：.hero__content 是集中覆盖规则；依次控制 gap。 */
    /* 选择器说明：控制首屏右侧介绍文案和观看作品按钮组合的样式。 */
    .hero__content { gap: 20px; }
    /* 中文注释：.hero__divider 是集中覆盖规则；依次控制 width、height。 */
    /* 选择器说明：控制首屏右侧文案前的短分隔线的样式。 */
    .hero__divider { width: 72px; height: 2px; background: var(--fg); }
    /* 中文注释：.hero__text 是集中覆盖规则；依次控制 font-size、font-weight、line-height。 */
    /* 选择器说明：控制首屏右侧三行中文介绍文案的样式。 */
    .hero__text { font-size: clamp(22px, 1.6vw, 25px); font-weight: 500; line-height: 1.52; color: var(--fg); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.58); }
    /* 中文注释：.hero__cta 是集中覆盖规则；依次控制 gap、margin-top。 */
    /* 选择器说明：控制首屏观看作品集按钮区域的样式。 */
    .hero__cta { gap: 16px; margin-top: 14px; }
    /* 改为实心圆角播放键：比空心圆更清楚、更有按钮感。 */
    /* 中文注释：.hero__play 是集中覆盖规则；依次控制 width、height、border、border-radius、background、color、box-shadow。 */
    /* 选择器说明：控制首屏观看作品集的播放按钮的样式。 */
    .hero__play { width: 54px; height: 54px; border: 2px solid rgba(242, 241, 239, 0.88); border-radius: 50%; background: rgba(7, 9, 12, 0.12); color: var(--fg); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
    /* 中文注释：.hero__play svg 是集中覆盖规则；依次控制 width、height、transform。 */
    /* 选择器说明：控制首屏观看作品集的播放按钮的样式。 */
    .hero__play svg { width: 22px; height: 22px; transform: translateX(1px); }
    /* 中文注释：.hero__caption 是集中覆盖规则；依次控制 font-size、font-weight、letter-spacing。 */
    /* 选择器说明：控制播放按钮旁的中文说明的样式。 */
    .hero__caption { font-size: clamp(19px, 1.45vw, 22px); font-weight: 600; letter-spacing: 0.04em; color: var(--fg); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.48); }
    /* 中文注释：.hero__caption-en 是集中覆盖规则；依次控制 font-size、font-weight、letter-spacing、color。 */
    /* 选择器说明：控制播放按钮旁的英文说明的样式。 */
    .hero__caption-en { font-size: clamp(11px, 0.95vw, 13px); font-weight: 500; letter-spacing: 0.12em; color: rgba(242, 241, 239, 0.78); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.46); }

    /* 左侧社媒入口加大，保证在1920桌面端一眼可辨。 */
    /* 中文注释：.hero__social 是集中覆盖规则；依次控制 gap。 */
    /* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
    .hero__social { gap: 54px; }
    /* 中文注释：.hero__social a 是集中覆盖规则；依次控制 display、align-items、justify-content、width、height。 */
    /* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
    .hero__social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
    .hero__social a svg,
    /* 中文注释：.hero__social img 是集中覆盖规则；依次控制 width、height。 */
    /* 选择器说明：控制首屏左侧社交平台图标栏的样式。 */
    .hero__social img { width: 32px; height: 32px; }

    /* “关于我”从人物身上移到横幅左上安全区，并进一步强化层级。 */
    /* 选择器说明：控制“关于我 / ABOUT ME”竖排栏目标题的样式。 */
    .about__label {
        /* 中文注释：设置定位元素距离左边的位置。 */
        left: 28px;
        /* 中文注释：设置定位元素距离上边的位置。 */
        top: 22px;
        /* 中文注释：设置元素平移、缩放、旋转或倾斜。 */
        transform: none;
    }
    /* 选择器说明：控制“关于我”中文标题的样式。 */
    .about__label-title {
        /* 中文注释：设置文字大小。 */
        font-size: 38px;
        /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
        font-weight: 500;
        /* 中文注释：设置字符之间的距离。 */
        letter-spacing: 0.12em;
        /* 中文注释：设置每行文字的行高和上下呼吸空间。 */
        line-height: 1.22;
        /* 中文注释：给文字添加阴影以增强层次或可读性。 */
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.48);
    }
    /* 选择器说明：控制“ABOUT ME”英文标题的样式。 */
    .about__label-en {
        /* 中文注释：设置文字大小。 */
        font-size: 12px;
        /* 中文注释：设置文字粗细，数值越大通常越醒目。 */
        font-weight: 400;
        /* 中文注释：设置文字或图标的颜色与透明度。 */
        color: rgba(242, 241, 239, 0.62);
    }

    /* 引语整组右移：结束引号作为行内元素，会跟随正文一起平移。 */
    /* 中文注释：.about__quote 是集中覆盖规则；依次控制 transform。 */
    /* 选择器说明：控制“真正的摄影……”整组引语的样式。 */
    .about__quote { transform: translateX(18px); }
    /* 中文注释：.about__quote-close 是集中覆盖规则；依次控制 top。 */
    /* 选择器说明：控制引语末尾的结束引号的样式。 */
    .about__quote-close { top: -0.05em; }

    /* 降低桌面端压暗层，找回原片的明亮与通透感。 */
    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩的样式。 */
    .hero__overlay {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(to right,
            rgba(8, 14, 20, 0.22) 0%,
            rgba(10, 16, 22, 0.12) 27%,
            rgba(14, 20, 26, 0.05) 55%,
            rgba(18, 24, 30, 0.025) 100%);
    }
    /* 中文注释：.hero__overlay::before 是集中覆盖规则；依次控制 background。 */
    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩（前置装饰伪元素）的样式。 */
    .hero__overlay::before { background: linear-gradient(to bottom, rgba(5, 7, 12, 0.10), transparent); }
    /* 中文注释：.hero__overlay::after 是集中覆盖规则；依次控制 background。 */
    /* 选择器说明：控制首屏图片上方的明暗渐变遮罩（后置装饰伪元素）的样式。 */
    .hero__overlay::after { background: linear-gradient(to top, rgba(5, 7, 12, 0.12), transparent); }
    /* 中文注释：.works__img 是集中覆盖规则；依次控制 filter。 */
    /* 选择器说明：控制作品卡片中的图片的样式。 */
    .works__img { filter: brightness(0.92) saturate(0.95); }
    /* 中文注释：.works__overlay 是集中覆盖规则；依次控制 background。 */
    /* 选择器说明：控制作品图片上方的渐变遮罩的样式。 */
    .works__overlay { background: linear-gradient(to bottom, rgba(5, 7, 12, 0.06), rgba(5, 7, 12, 0.38)); }
    /* 选择器说明：控制“光影故事”图片上的渐变遮罩的样式。 */
    .story__overlay {
        /* 中文注释：设置背景颜色、图片、渐变、尺寸或位置等综合效果。 */
        background: linear-gradient(to right,
            rgba(5, 7, 12, 0.66) 0%,
            rgba(10, 13, 18, 0.52) 40%,
            rgba(15, 19, 28, 0.38) 70%,
            rgba(22, 29, 43, 0.32) 100%);
    }
}

/* 选择器说明：超宽或极矮桌面仅给“关于我”增加高度保底，保留原桌面三栏、缩放和位置。 */
@media (min-width: 1280px) and (min-aspect-ratio: 2/1) {
    .about {
        height: max(35vh, 320px);
    }
}

/* ========================================
   微信联系弹窗与邮件入口
   ======================================== */

/* 选择器说明：统一社交栏中的链接和微信按钮，避免按钮继承浏览器默认外观。 */
.hero__social .hero__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--transition-base), transform var(--transition-base);
}

/* 选择器说明：控制微信按钮悬停和键盘聚焦时的提亮效果。 */
.hero__social .hero__social-link:hover,
.hero__social .hero__social-link:focus-visible {
    color: var(--fg);
    transform: translateX(2px);
    outline: none;
}

/* 选择器说明：控制微信二维码弹层的定位、显隐和背景。 */
.wechat-popover {
    position: fixed;
    inset: 0;
    z-index: 120;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

/* 选择器说明：微信二维码打开时恢复可见状态。 */
.wechat-popover.is-open {
    visibility: visible;
    opacity: 1;
}

/* 选择器说明：控制桌面端悬浮二维码的暗色电影感卡片。 */
.wechat-popover__card {
    position: absolute;
    left: clamp(82px, 6.8vw, 126px);
    top: 50%;
    width: min(380px, calc(100vw - 32px));
    padding: 26px 26px 24px;
    border: 1px solid rgba(242, 241, 239, 0.14);
    background: rgba(12, 14, 18, 0.96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(16px);
    transform: translate(-12px, -50%);
    opacity: 0;
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease;
}

/* 选择器说明：打开时让二维码卡片轻微向右淡入。 */
.wechat-popover.is-open .wechat-popover__card {
    transform: translate(0, -50%);
    opacity: 1;
}

/* 选择器说明：控制微信弹窗右上角关闭按钮。 */
.wechat-popover__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(242, 241, 239, 0.62);
    font: 300 26px/1 var(--sans);
    cursor: pointer;
    transition: color var(--transition-base), transform var(--transition-base);
}

/* 选择器说明：关闭按钮悬停或聚焦时提亮。 */
.wechat-popover__close:hover,
.wechat-popover__close:focus-visible {
    color: var(--fg);
    transform: rotate(6deg);
    outline: none;
}

/* 选择器说明：控制微信弹窗顶部的小号英文标识。 */
.wechat-popover__eyebrow {
    margin: 0 0 5px;
    color: rgba(242, 241, 239, 0.48);
    font: 400 10px/1.3 var(--sans);
    letter-spacing: 0.34em;
}

/* 选择器说明：控制微信弹窗的中文标题。 */
.wechat-popover__title {
    margin: 0 0 20px;
    color: var(--fg);
    font-family: "苏绣体", var(--serif);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* 选择器说明：用象牙白相纸承载二维码，电影感只停留在二维码外部。 */
.wechat-popover__photo {
    padding: 10px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

/* 选择器说明：二维码保持原始比例、清晰度和完整白色安全区。 */
.wechat-popover__photo img {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}

/* 选择器说明：控制二维码下方的微信扫码提示。 */
.wechat-popover__hint {
    margin: 17px 0 0;
    color: rgba(242, 241, 239, 0.68);
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-align: center;
}

/* 选择器说明：移动端打开二维码时阻止背景页面跟随滚动。 */
body.wechat-dialog-open {
    overflow: hidden;
}

@media (min-width: 1280px) {
    /* 选择器说明：保持微信按钮与用户确认的32像素桌面社交图标一致。 */
    .hero__social .hero__social-link {
        width: 32px;
        height: 32px;
    }

    .hero__social .hero__social-link svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    /* 选择器说明：移动端社交栏中的微信按钮使用与链接相同的触控尺寸和负外边距，确保图标与其余入口共用一条中轴线。 */
    .hero__social .hero__social-link {
        width: 44px;
        height: 44px;
        margin: -12px;
    }

    /* 选择器说明：移动端二维码使用居中遮罩弹窗，而不是依赖鼠标悬浮。 */
    .wechat-popover {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(4, 6, 10, 0.78);
        backdrop-filter: blur(10px);
    }

    .wechat-popover.is-open {
        pointer-events: auto;
    }

    /* 选择器说明：控制移动端二维码卡片的居中尺寸和淡入位移。 */
    .wechat-popover__card {
        position: relative;
        left: auto;
        top: auto;
        width: min(390px, 100%);
        max-height: calc(100dvh - 36px);
        padding: 23px 20px 20px;
        overflow: auto;
        transform: translateY(14px) scale(0.98);
    }

    .wechat-popover.is-open .wechat-popover__card {
        transform: translateY(0) scale(1);
    }

    .wechat-popover__title {
        margin-bottom: 16px;
        font-size: 24px;
    }

    /* 选择器说明：移动端关闭按钮使用44像素触控区域并适当提亮。 */
    .wechat-popover__close {
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        color: rgba(242, 241, 239, 0.82);
        font-size: 28px;
    }

    .wechat-popover__hint {
        margin-top: 14px;
        color: rgba(242, 241, 239, 0.76);
        font-size: 12px;
    }
}