/* ============================================================
   影忆数码馆 — 黑白杂志风
   衬线大标题 / 发丝线 / 大留白 / 灰度转彩色
   ============================================================ */

:root {
    --black: #0a0a0a;
    --ink: #1a1a1a;
    --grey: #8a8a8a;
    --line: #e5e5e5;
    --bg: #ffffff;
    --bg-grey: #f6f6f6;
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    /* 兜底：窄屏下万一有元素超宽，不让整页跟着左右晃 */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 关掉浏览器自带的「点击高亮」（tap highlight）：
   手机上点 <a>/<button> 时，浏览器会在被点元素上先闪一层半透明色块并淡出
   —— 安卓 Chrome 是淡灰，国产内核（微信 X5 / UC / 部分手机自带浏览器）是蓝色。
   灯箱是「原地打开、页面不跳转」，抬指那一刻的高亮和灯箱同时出现，
   看着就像"被点的那张图位置闪了一块蓝色"。它不是页面里的任何元素，只能靠这个
   非标准属性关掉。★ 该属性不是继承属性，必须落在被点的元素上，
   所以直接写在 a/button 上最稳（写在 html/body 上在部分内核实测不生效）。 */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 860px; }

/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-block;
    padding: 14px 42px;
    font-size: 13px;
    letter-spacing: 4px;
    border: 1px solid transparent;
    transition: all .35s ease;
    cursor: pointer;
}
.btn-light { background: #fff; color: var(--black); }
.btn-light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: #fff; background: #fff; color: var(--black); }
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: transparent; color: var(--black); border-color: var(--black); }

/* ---------------- 头部导航 ---------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background .4s ease, box-shadow .4s ease;
}
.site-header.scrolled,
body:not(.page-index) .site-header {
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(8px);
}
.header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #fff;
    transition: color .4s ease;
}
.brand-en {
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,.6);
    transition: color .4s ease;
}
.site-header.scrolled .brand-name,
body:not(.page-index) .brand-name { color: var(--black); }
.site-header.scrolled .brand-en,
body:not(.page-index) .brand-en { color: var(--grey); }

.main-nav { display: flex; gap: 34px; }
.main-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    color: rgba(255,255,255,.85);
    transition: color .3s ease;
    position: relative;
}
.nav-cn { font-size: 14px; letter-spacing: 3px; }
.nav-en { font-size: 8px; letter-spacing: 2px; opacity: .5; }
.main-nav a::after {
    content: "";
    position: absolute;
    bottom: -8px; left: 50%;
    width: 0; height: 1px;
    background: currentColor;
    transition: all .3s ease;
    transform: translateX(-50%);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.site-header.scrolled .main-nav a,
body:not(.page-index) .main-nav a { color: var(--ink); }

/* ---- 「样图展示」的下拉菜单（内容是作品分类，两级） ----
   桌面端悬停展开，手机端点击展开（见下面的媒体查询）。
   ★ 下拉里的 <a> 会被上面的 `.main-nav a` 命中（那条是给导航项用的竖排居中样式），
     所以下面必须显式覆盖成横排 —— 否则子分类会各自变成一列居中，完全不成行。 */
.nav-item { position: relative; }
.main-nav .nav-sub {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    min-width: 240px;
    max-width: min(560px, calc(100vw - 40px));
    background: #fff;
    box-shadow: 0 20px 48px rgba(0,0,0,.16);
    border-top: 2px solid var(--black);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 20;
}
/* 导航项和面板之间隔着 16px，鼠标从项移到面板会经过这段空隙 ——
   不接住的话菜单会在半路闪断。用一块透明的"桥"把它连起来。 */
.main-nav .nav-sub::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -18px; height: 18px;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .nav-sub a {
    display: block;
    flex-direction: row;
    align-items: baseline;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 1px;
    padding: 6px 12px;
    white-space: nowrap;
    transition: background .18s ease;
}
.main-nav .nav-sub a::after { display: none; }
.main-nav .nav-sub a:hover { background: #f4f5f7; }
.main-nav .nav-sub-all {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--grey);
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.nav-sub-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
    padding-right: 8px;
}
.main-nav .nav-sub-top { font-weight: 600; padding-left: 12px; }
.nav-sub-kids { display: flex; flex-wrap: wrap; gap: 0 2px; }
.main-nav .nav-sub-kids a { padding: 6px 9px; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: #fff;
    transition: all .3s ease;
}
.site-header.scrolled .nav-toggle span,
body:not(.page-index) .nav-toggle span { background: var(--black); }

/* 手机端菜单的遮罩层：由 main.js 动态插入到 <body>。桌面端一律不显示 */
.nav-scrim { display: none; }

/* ---------------- 首页 HERO ---------------- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    background: var(--black);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.6) 100%);
}
.hero-content {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 0 24px;
    max-width: 900px;
}
.hero-label {
    font-size: 11px;
    letter-spacing: 6px;
    color: rgba(255,255,255,.65);
    margin-bottom: 28px;
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 900;
    letter-spacing: 12px;
    line-height: 1.2;
}
.hero-line {
    width: 64px; height: 1px;
    background: rgba(255,255,255,.7);
    margin: 36px auto;
}
.hero-sub {
    font-size: 16px;
    letter-spacing: 3px;
    color: rgba(255,255,255,.85);
    margin-bottom: 48px;
}
.hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
/* 访客计数：按钮下方、横向居中。字重与色彩跟 hero 其它小字一致，不抢主标题。
   后台关掉「主页显示」时这个元素整个不输出，不留空白。 */
.hero-visitors {
    margin-top: 40px;
    font-size: 11px;
    letter-spacing: 6px;
    color: rgba(255,255,255,.55);
}
/* 数字单独收紧字距 —— 汉字之间留 6px 很透气，但「1,001」被同样拉开会读成 1、0、0、1 */
.hero-visitors span { letter-spacing: 1px; }
.hero-scroll {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 4px;
    color: rgba(255,255,255,.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.hero-scroll span {
    width: 1px; height: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: .3; transform: scaleY(.6); }
}

/* ---------------- 通用 section ---------------- */
.section { padding: 110px 0; }
.section-dark { background: var(--black); color: #eee; }
.section-grey { background: var(--bg-grey); }

.section-head {
    position: relative;
    margin-bottom: 60px;
}
.sec-no {
    position: absolute;
    top: -34px; left: -8px;
    font-family: var(--serif);
    font-size: 96px;
    font-weight: 900;
    color: rgba(0,0,0,.05);
    line-height: 1;
    pointer-events: none;
}
.section-dark .sec-no { color: rgba(255,255,255,.07); }
.sec-en {
    display: block;
    font-size: 11px;
    letter-spacing: 5px;
    color: var(--grey);
    margin-bottom: 10px;
}
.sec-title {
    font-family: var(--serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: 6px;
}
.sec-more {
    position: absolute;
    right: 0; bottom: 12px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--grey);
    border-bottom: 1px solid transparent;
    transition: all .3s ease;
}
.sec-more:hover { color: inherit; border-color: currentColor; }

/* 介绍 */
.intro-text {
    max-width: 760px;
    font-size: 16px;
    color: #444;
    letter-spacing: 1px;
}
.intro-stats {
    display: flex;
    gap: 72px;
    margin-top: 56px;
    flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
    font-family: var(--serif);
    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
}
.stat-num i { font-style: normal; font-size: 28px; }
.stat-label { font-size: 12px; letter-spacing: 3px; color: var(--grey); margin-top: 6px; }

/* ---------------- 作品墙 (masonry) ---------------- */
/* ★ 行优先网格：从左到右、填满一行再换行。
   原来用 CSS columns（多列布局）是「列优先」——先把第一列从上到下填满，再流到第二列，
   所以看到的顺序是「从上往下」而不是「从左到右」。
   ★ align-items: start 不能删：grid 默认 stretch，会把同一行里较矮的格子拉到行高，
   图片下方会多出一块 #111 底色（看起来像图片没铺满）。 */
.masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}
.masonry-item {
    position: relative;
    overflow: hidden;
    background: #111;
}
.masonry-item a { display: block; position: relative; }
/* ★ 宽高比占位（不依赖 aspect-ratio，老内核同样成立）：
   模板给 <a> 输出 style="padding-top:150%"（= 高÷宽×100），图片绝对定位铺满。
   原来只靠 <img> 的 width/height 属性推导宽高比，那只在 Chrome 88+ / Safari 15+ 有效；
   老内核不认，图片下载完成前高度仍是 0 ⇒ .masonry-item 零面积 ⇒ 懒加载自锁又回来了
   （老内核实测：只靠属性时作品墙 909px→111px，加上 padding-top 立刻回到 909px）。
   ★ 必须在 PHP 取不到图片尺寸时一起退回（那时 <a> 不带 auto-ratio 类，走下面的常规规则），
   否则 <a> 没 padding-top 而图片又是绝对定位，会塌成 0 高。 */
.masonry-item a.auto-ratio > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.masonry-item img {
    width: 100%;
    /* ★ height:auto 不能删：模板给 <img> 输出了 width/height 属性（防止图未下载时高度塌成 0，
       零面积元素会让浏览器懒加载直接跳过它，那张图就永远不加载、永远看不见）。
       但是 height="4000" 这种呈现性提示会原样生效，把图拉成 4000px 高 —— 必须用 height:auto 复位。 */
    height: auto;
    display: block;
    /* 直接显示彩色：手机上没法悬停，原来的「默认黑白、悬停转彩」等于永远看不到颜色 */
    transition: transform .8s ease;
}
.masonry-item:hover img {
    transform: scale(1.04);
}
.masonry-item figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 32px 18px 14px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all .4s ease;
    /* 高于对比层(.cmp-layer z-index:1)与对比竖线(2) —— 悬停看对比时，标题不能被测图盖住 */
    z-index: 3;
}
.masonry-item:hover figcaption { opacity: 1; transform: translateY(0); }
.fi-cat { display: block; font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,.65); }
.fi-title { display: block; font-size: 14px; letter-spacing: 2px; }

/* 筛选条 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
    /* ★ 不能默认 stretch：手机上点开子分类时，带子分类的那格会变高，
       其它不含子分类的一级方块会被一起拉高 —— 那就"改变了一级分类的样子"。 */
    align-items: flex-start;
}
.filter-btn {
    padding: 9px 24px;
    font-size: 13px;
    letter-spacing: 2px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: all .3s ease;
    font-family: var(--sans);
}
.filter-btn:hover { border-color: var(--black); }
.filter-btn.active { background: var(--black); color: #fff; border-color: var(--black); }
/* 二级筛选：带子分类的一级方块，子分类用与一级**完全相同**的方块样式。
   基础（手机等没有精确指针的设备）：子分类**往右排、与一级共处同一行**，
   一行放不下就**超一个换一个**（自动换到第二排、第三排……），和一级方块一样的排法。

   实现：.filter-item 与 .filter-sub 都设 display:contents ⇒ 这两个盒子**不参与排版**，
   它们的子项（一级按钮、各子分类按钮）直接成为 .filter-bar 这个 flex 容器的子项
   ⇒ 换行由 .filter-bar 的 flex-wrap 统一接管 ⇒ 天然"超一个换一个"。
   ★ 必须这样：只要子分类还被包在 .filter-sub 这个盒子里，换行的单位就是整个盒子
     （整组一起掉下去），做不到"超一个换一个"。
   ★ 代价 1：.filter-sub::before 那条层级竖线在 display:contents 下不渲染 —— 用户选定去掉。
   ★ 代价 2：手机展开始终会让筛选条变高（一级+子分类必然超过一行），下方作品墙仍会被
     往下推一点 —— 这是"逐个换行"这个诉求本身决定的，无法消除。
   ★ 桌面端（@media hover:hover）会把这两个属性全部覆写回 flex，那套"宽度驱动丝滑右滑"
     完全不受影响。 */
.filter-item { display: contents; }
.filter-sub { display: contents; }
/* 收起态：子分类按钮不占位、不显示 */
.filter-item:not(.open):not(.is-hover) .filter-sub .filter-btn { display: none; }

/* ★ 二级标签的视觉标识（手机端）：默认**浅灰底 + 黑字**，与一级（透明底细边框）一眼分开。
   选中后仍是**黑底白字**（沿用 .filter-btn.active，不覆盖）—— 用户 2026-10-10 定。
   ★ 必须带 :not(.active)：`.filter-sub .filter-btn` 权重(0,2,0) 高于 `.filter-btn.active`(0,2,0)
     同为 0,2,0 但后者在源序里更靠前 ⇒ 会被这里盖掉，选中的二级标签也会变灰。
     用 :not(.active) 排除后，选中态继续走 .filter-btn.active 的黑底白字。
   ★ 只写基础块（= 手机；桌面 @media hover:hover 里另有一条 .filter-sub .filter-btn 规则，
     桌面端不受影响）—— 用户选定只改手机端。
   色值：--paper 系浅灰，比 --line(#e5e5e5) 稍深一档，1 倍缩放下能看清是"一块底"而不是"边框"。 */
.filter-sub .filter-btn:not(.active) {
    background: #ededed;
    border-color: #ededed;
    color: var(--ink);
}

/* 桌面（真有鼠标悬停能力）：子分类排在**一级右边、同一行**，右边的一级方块整体右移让位。
   子分类不再占垂直空间 ⇒ 展开/收起时筛选条高度不变、下方的作品墙纹丝不动。
   （老版本让子分类往下垂成浮层，再给筛选条补 47px 的 padding-bottom 免得压住照片，
     代价就是作品墙被推下去 47px —— 用户看到的"照片被弹开"就是它，那套补偿已删除。）
   ★ 一行放得下的前提是实测过的：1440 屏容器 1216px（收起 354 / 展开最大一组 688），
     1024 屏容器 945px 也够。真放不下时靠 .filter-bar 的 flex-wrap 把**整组**换到
     下一行（配 .filter-item 的 flex-shrink:0），不会把子分类单独拆下去。 */
@media (hover: hover) and (pointer: fine) {
    /* ★ display 必须显式改回 flex：基础块给的是 display:contents（手机那套"超一个换一个"），
       桌面这里要恢复成"盒子"，否则 .filter-sub 的宽度驱动动画无处依附。 */
    .filter-item { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; max-width: 100%; }

    /* ★ 展开是「宽度驱动」的，不再是 display 切换。
       原因：display 不参与 transition（`none` ↔ `flex` 之间没有中间态），
       只能是"啪"地出现 —— 用户说的"生硬"就是它。
       改成把宽度从 0 过渡到自然宽：transition 逐帧插值 ⇒ 浏览器每帧重排 ⇒
       右边的一级方块自然跟着**连续右移**让位，不需要单独给它们做动画。
       自然宽写不死在 CSS 里（按钮文字长短、子分类个数都会变）⇒ 由 main.js 量一次
       写成内联 width。收起时内联宽度回 0，右边的一级方块平滑移回原位。 */
    .filter-sub {
        display: flex;
        position: static;
        flex-wrap: nowrap;
        gap: 12px;
        width: 0;            /* 收起态：占位为 0，等价于"不存在"（不用 display:none） */
        overflow: hidden;    /* 裁掉还在往外滑的按钮 */
        margin: 0;
        /* 默认节奏 = 收起（快）；展开的时长由 JS 按子分类个数算好写成内联值 */
        transition: width .18s ease-out, margin-left .18s ease-out;
    }
    /* ★ 必须把基础块那条"收起时子分类 display:none"还原：桌面收起态靠 width:0 裁切，
       按钮要**留在排版里**才量得到 max-content —— 被 display:none 掉的话 JS 量出 0 宽。 */
    .filter-item:not(.open):not(.is-hover) .filter-sub .filter-btn { display: block; }
    /* 展开态：往右缩进 10px（跟着上面那条 transition 一起过渡）。
       ★ width 先给 max-content —— 这是给"JS 还没接管"和"?cat= 直达首屏"兜底的，
         有它就不依赖脚本、也不会先渲染一帧 0 宽再弹开。
         注意 max-content 与长度之间**不能**插值过渡（除非开了 interpolate-size），
         所以真正的展开动画必须由 main.js 换成实测 px 之后才有 —— 它一进来就会替换。 */
    .filter-item.open .filter-sub,
    .filter-item.is-hover .filter-sub { margin-left: 10px; width: max-content; }

    /* 层级提示：一条 1px 细竖线（方块样式仍与一级完全相同，保持"同款方块"的观感，
       只是一眼能看出右边这几个属于左边那一级）。
       ★ 做成 flex 子项而不是容器的 border/padding：border 和 padding 在 width:0 时
         照样占位（收起后整行会平白多出 11px），而且没法跟着一起被裁掉。
         做成子项后它随容器宽度一起被 overflow 裁切、一起撑开，不需要额外过渡。
       ★ 色值写死、不用 var(--line)（#e5e5e5）：那块色跟按钮自己的边框同色，
         1 倍缩放下几乎看不出这条线，起不到"层级提示"的作用（放大 4 倍才明显）。
         这里用深一档的 #c9c9c9 —— 比按钮边框重、比 --grey(#8a8a8a) 轻。 */
    .filter-sub::before {
        content: '';
        flex: 0 0 1px;
        align-self: stretch;
        background: #c9c9c9;
    }

    /* 子分类按钮：依次滑出（从左边一点点滑进来 + 淡入）。
       逐个错开的延迟由 main.js 按序号写成内联 transitionDelay（没有数量上限）。
       ★ transition 要重写整条：.filter-btn 自己的 `transition: all .3s ease` 会被
         这条覆盖掉，所以边框/底色的悬停过渡得手动带上，否则 hover 变色会变生硬。
       ★ 滑出初始态用**通用选择器**（不带 :not(.active)）——不管选中与否都要有，否则
         选中的那个二级标签会跳过滑出、直接"啪"地出现。 */
    .filter-sub .filter-btn {
        flex: 0 0 auto;
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity .175s ease,
                    transform .175s cubic-bezier(.22,.61,.36,1),
                    border-color .3s ease,
                    background-color .3s ease,
                    color .3s ease;
    }
    /* ★ 把基础块那条「二级标签浅灰底」覆写回透明。选择器必须带 :not(.active)，
       与基础块那条**权重对齐**(0,3,0) 才盖得住（否则浅灰底漏到桌面端，见上方注释）。 */
    .filter-sub .filter-btn:not(.active) {
        background: transparent;
        border-color: var(--line);
    }
    .filter-item.open .filter-sub .filter-btn,
    .filter-item.is-hover .filter-sub .filter-btn {
        opacity: 1;
        transform: none;
    }
}

/* 系统里关了动效就直接就位（JS 写的内联过渡也会被 !important 压掉） */
@media (prefers-reduced-motion: reduce) {
    .filter-sub,
    .filter-sub .filter-btn { transition: none !important; }
}
.filter-empty { text-align: center; color: var(--grey); padding: 60px 0; letter-spacing: 2px; }
.masonry-item.hide { display: none; }

/* ★ JS 接管后的作品墙（main.js 会加上 .masonry--flow，见该文件顶部注释）：
   由 grid 改为「相对定位容器 + 绝对定位格子」，每张图落在当前最短的那一列，
   上下间隙恒等于 gap（= 参考页 ylxp.html isotope 的排法）。
   宽高和 left/top 全由 JS 写出；高度取自 PHP 算好的宽高比，不等图片下载，
   所以不会退回「图未到 → 高度 0 → 零面积 → 懒加载自锁」的老坑。
   ★ JS 没跑或报错时不会加这个类，页面自动退回上面的 grid 布局（可用性不受影响）。 */
.masonry--flow { display: block; position: relative; }
.masonry--flow > .masonry-item { position: absolute; top: 0; left: 0; }

/* ---- 首页「精选样图」：整齐的两排（justified 等高行） ----
   行内每张的 flex-grow 由 PHP 写成「自己的宽高比」，<a> 又带 padding-top 占位，于是
       行高 H = (容器宽 − (n−1)×gap) ÷ Σ(宽÷高)，每张宽 = H × 自己的比例
   ⇒ 同一行内**每张等高**、整行刚好铺满容器，既不变形也不裁切；两排行高尽量接近。
   ★ 这里**不能复用 .masonry**：那个类会被 main.js 接管成绝对定位瀑布流，
     行结构会被打散。容器不叫 .masonry，JS 就完全不碰它。
   ★ flex-grow 走行内 style，所以这里只写 basis/shrink，别用 flex 简写覆盖它。 */
.works-rows { display: flex; flex-direction: column; gap: 20px; }
.works-row { display: flex; gap: 20px; }
.works-row > .masonry-item { flex-basis: 0; flex-shrink: 1; min-width: 0; }
/* 只有一两张图的行（新站图片还不够）：不限宽的话行高会被撑到上千像素 */
.works-row--few { max-width: 620px; }
/* 手机那套（每排 2 张）：桌面视口下整块不参与布局 */
.works-rows--m { display: none; }

/* ---- 双图对比（网格里悬停查看） ----
   只有配了对比图的样图才会被 JS 注入这两层；没配的图零开销。
   默认把对比层整幅裁掉 = 只看得到主图，鼠标进来后 JS 按鼠标位置写 clip-path，
   露出右边一段 —— 于是「竖线左边是主图、右边是对比图」。
   用 clip-path 而不是改 width/left：百分比是相对元素自身算的，窗口缩放不用重算，
   鼠标划过时也只是重绘、不触发重排。
   ★ 老内核不认 clip-path 时 JS 不会注入这两层，页面退回普通图片，不会出错。 */
.cmp-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: opacity .22s ease;
    pointer-events: none;
    z-index: 1;
}
.cmp-layer > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cmp-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 12px rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
    z-index: 2;
}
.lb-link.cmp-on .cmp-layer { opacity: 1; }
.lb-link.cmp-on .cmp-line { opacity: 1; }

/* ---------------- 服务 ---------------- */
.service-rows { border-top: 1px solid var(--line); }
.service-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 26px 8px;
    border-bottom: 1px solid var(--line);
    transition: background .3s ease, padding .3s ease;
}
.service-row:hover { background: var(--bg-grey); padding-left: 20px; }
.sr-no { font-family: var(--serif); font-size: 15px; color: var(--grey); }
.sr-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 3px; }
.sr-dots { flex: 1; border-bottom: 1px dotted #ccc; transform: translateY(-6px); }
.sr-price { font-size: 15px; letter-spacing: 1px; color: #555; white-space: nowrap; }

.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-block { background: #fff; padding: 40px 34px; }
.sb-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sb-no { font-family: var(--serif); font-size: 30px; font-weight: 900; color: rgba(0,0,0,.12); }
.sb-name { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.sb-dots { flex: 1; min-width: 24px; border-bottom: 1px dotted #ccc; transform: translateY(-6px); }
.sb-price { font-size: 15px; color: var(--black); font-weight: 600; letter-spacing: 1px; white-space: nowrap; }
.sb-desc { font-size: 13.5px; color: #666; line-height: 1.9; }

.service-cta { text-align: center; margin-top: 72px; }
.service-cta p { color: var(--grey); letter-spacing: 2px; margin-bottom: 22px; }

/* 产品说明 */
/* 产品说明：每个系列一份，点系列标签时整块跟着换（见 main.js 的「产品系列标签」） */
.product-notes { margin-bottom: 56px; }
.product-note {
    border-left: 2px solid var(--black);
    padding: 6px 0 6px 26px;
    max-width: 820px;
}
.product-note p + p { margin-top: 8px; }
/* ★ hidden 会被 display:grid / flex 之类的声明盖掉，这里明确一次 —— 说明块和产品块都靠它切换 */
.product-note[hidden],
.product-panel[hidden] { display: none; }
.product-note h3 {
    font-family: var(--serif);
    font-size: 19px;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.product-note p { font-size: 13.5px; color: #666; }

/* ---------------- 产品海报网格 ---------------- */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
}
.poster-item { background: #fff; }
.poster-item > a { display: block; overflow: hidden; border: 1px solid var(--line); position: relative; }
/* 同 .masonry-item：padding-top 占位（老内核兜底），见上方注释 */
.poster-item a.auto-ratio > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.poster-item img { width: 100%; height: auto; display: block; transition: transform .7s ease; }
.poster-item:hover img { transform: scale(1.03); }
.poster-info { padding: 18px 6px 0; }
.poster-info h4 { font-family: var(--serif); font-size: 17px; letter-spacing: 2px; margin-bottom: 6px; }
.poster-info p { font-size: 13px; color: #777; }

/* ---------------- 动态 ---------------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.news-card {
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
/* ★ 16:10 的封面框改成 padding-top 占位：老内核不认 aspect-ratio，封面框会塌成 0 高
   （不是"图没到"，是框本身没有高度，图永远撑不出来）。padding 百分比没有这个限制。 */
.news-cover { position: relative; overflow: hidden; padding-top: 62.5%; }
.news-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .5s ease;
}
/* 「黑白 → 悬停转彩」只在真正能用鼠标悬停的设备上启用。
   这里刻意用「默认彩色 + 正向开启灰度」，而不是「默认灰度 + hover:none 时取消」：
   部分安卓浏览器会把 hover 误报为 hover:hover，反着写手机上就会永远是黑白。
   正向判断写错时最坏结果也只是少一个悬停特效，颜色一定看得见。 */
@media (hover: hover) and (pointer: fine) {
    .news-cover img { filter: grayscale(100%); }
    .news-card:hover .news-cover img { filter: grayscale(0%); }
}
.news-body { padding: 26px 26px 30px; }
.news-body time { font-size: 11px; letter-spacing: 3px; color: var(--grey); }
.news-body h3 { font-family: var(--serif); font-size: 18px; letter-spacing: 1px; margin: 10px 0 8px; }
.news-body p { font-size: 13px; color: #777; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.news-list { border-top: 1px solid var(--line); }
.news-row {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 34px 12px;
    border-bottom: 1px solid var(--line);
    transition: background .3s ease, padding .3s ease;
}
.news-row:hover { background: var(--bg-grey); padding-left: 26px; }
.nr-date { text-align: center; min-width: 64px; }
.nr-day { display: block; font-family: var(--serif); font-size: 36px; font-weight: 900; line-height: 1; }
.nr-ym { display: block; font-size: 11px; letter-spacing: 2px; color: var(--grey); margin-top: 6px; }
.nr-body { flex: 1; }
.nr-body h3 { font-family: var(--serif); font-size: 19px; letter-spacing: 1px; margin-bottom: 6px; }
.nr-body p { font-size: 13px; color: #888; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nr-arrow { font-size: 20px; color: var(--grey); transition: transform .3s ease; }
.news-row:hover .nr-arrow { transform: translateX(6px); color: var(--black); }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.pagination a {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: 1px;
    transition: all .3s ease;
}
.pagination a:hover { border-color: var(--black); }
.pagination a.active { background: var(--black); color: #fff; border-color: var(--black); }

/* 文章详情 */
.article-cover { margin-bottom: 44px; }
.article-cover img { width: 100%; height: auto; display: block; }
.article-content { font-size: 15.5px; color: #333; line-height: 2.1; }
.article-content p { margin-bottom: 1.2em; }
/* ★ height:auto 不能省：正文里的图带 width/height 属性（防加载前塌成 0 高、少一次跳动），
   没有 height:auto 的话 height="2667" 会原样生效 —— 图会被硬拉成 2667px 高、宽度却被
   max-width 压到 796px，整张图严重变形。两个必须同时存在。 */
.article-content img { margin: 24px auto; height: auto; }
.article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--serif);
    letter-spacing: 2px;
    margin: 1.6em 0 .7em;
}

/* ---------------- 正文图文模板 ----------------
   后台「动态管理 → 正文」提供了 8 套图文模板，插进正文的就是下面这些结构。
   前台必须认这些类名，否则模板里的图会带着 <figure> 的浏览器默认缩进、
   并排图上下还各顶 24px 空档，看着就是「拼上去的」。
   结构改了这里也要跟着改 —— 两边的类名是一套约定。 */
.article-content figure { margin: 0; }
.article-content figcaption {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--grey);
    letter-spacing: 1px;
    text-align: center;
}

/* 单图 + 图注 */
.article-content .art-fig { margin: 32px 0; }
.article-content .art-fig img { width: 100%; margin: 0; }

/* 并排图（两图 / 三图） */
.article-content .art-cols { display: grid; gap: 16px; margin: 32px 0; }
.article-content .art-cols--2 { grid-template-columns: 1fr 1fr; }
.article-content .art-cols--3 { grid-template-columns: repeat(3, 1fr); }
.article-content .art-cols figure { margin: 0; }
.article-content .art-cols img { width: 100%; margin: 0; }

/* 图文左右（左图右文 / 右图左文） */
.article-content .art-media {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 26px;
    align-items: center;
    margin: 34px 0;
}
.article-content .art-media--right { grid-template-columns: 1fr 42%; }
.article-content .art-media-fig { margin: 0; }
.article-content .art-media img { width: 100%; margin: 0; }
.article-content .art-media-body h4 {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: 2px;
    margin: 0 0 10px;
}
.article-content .art-media-body p { margin-bottom: .8em; }
.article-content .art-media-body p:last-child { margin-bottom: 0; }

/* 重点句 / 引言 */
.article-content .art-quote {
    margin: 36px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--black);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.9;
    letter-spacing: 1.5px;
    color: var(--ink);
}

/* 提示块 */
.article-content .art-note {
    margin: 32px 0;
    padding: 20px 24px;
    background: var(--bg-grey);
    border-left: 3px solid #c9c9c9;
    font-size: 14.5px;
    line-height: 2;
    color: #444;
}
.article-content .art-note b { display: block; margin-bottom: 6px; color: var(--ink); letter-spacing: 1px; }
.article-content .art-note p { margin-bottom: 0; }

/* 章节分隔 + 小标题 */
.article-content .art-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 46px 0 20px;
}
.article-content .art-divider::before,
.article-content .art-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.article-content .art-divider span {
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--grey);
}
.article-content .art-h {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 3px;
    margin: 0 0 20px;
    padding-left: 13px;
    border-left: 3px solid var(--black);
}

.article-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 72px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.an-item span { display: block; font-size: 11px; letter-spacing: 3px; color: var(--grey); margin-bottom: 4px; }
.an-item em { font-style: normal; font-family: var(--serif); font-size: 15px; }
.an-next { text-align: right; margin-left: auto; }

/* ---------------- 关于 ---------------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
    align-items: start;
}
.about-text > p { color: #444; font-size: 15.5px; }
.contact-rows { margin-top: 48px; border-top: 1px solid var(--line); }
.contact-row {
    display: flex;
    gap: 28px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.cr-label { min-width: 96px; font-size: 12px; letter-spacing: 3px; color: var(--grey); }
.cr-value { font-family: var(--serif); font-size: 17px; letter-spacing: 1px; }
.about-qr { text-align: center; }
.about-qr img { border: 1px solid var(--line); padding: 12px; height: auto; }
.about-qr > span { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 3px; color: var(--grey); }
.qr-placeholder {
    aspect-ratio: 1;
    /* 老内核不认 aspect-ratio ⇒ 这里会给 0 高，整块占位内容看不见。min-height 兜底。 */
    min-height: 260px;
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #bbb;
}
.qr-placeholder span { font-family: var(--serif); font-size: 22px; letter-spacing: 6px; }
.qr-placeholder p { font-size: 12px; line-height: 1.8; }

/* ---------------- CTA 条 ---------------- */
.cta-band { background: var(--black); color: #fff; padding: 90px 0; }
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-inner h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); letter-spacing: 3px; margin-bottom: 12px; }
.cta-inner p { color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: 1px; }

/* ---------------- 页脚 ---------------- */
.site-footer { background: #060606; color: #999; }
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 32px 48px;
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}
.footer-logo {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #eee;
    margin-bottom: 14px;
}
.footer-slogan { font-size: 13px; letter-spacing: 2px; color: #777; max-width: 420px; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.fc-item { display: flex; gap: 18px; font-size: 13.5px; }
.fc-label { min-width: 88px; font-size: 11px; letter-spacing: 3px; color: #666; padding-top: 2px; }
.footer-bottom {
    border-top: 1px solid #1c1c1c;
    padding: 22px 32px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: #666;
    display: flex;
    justify-content: center;
    /* 窄屏下 <a> 被加了 padding 撑大触摸区，不加这条会和旁边的 span 差 6px 高 */
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-bottom a:hover { color: #bbb; }

/* ---------------- 灯箱 ---------------- */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.94);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.open { display: flex; }
.lb-stage {
    position: relative;
    line-height: 0;
    /* 翻页动画作用在这一层（主图 + 对比层 + 竖线一起动）。
       transition 由 JS 分段设置内联值（见 main.js 的 go()）；这里的默认过渡只管
       跟手拖动松手后「没到阈值」的回弹与状态清理。缓动用 ease-out 系（先快后慢）——
       原来用 linear 是在匀速运动里直接停住，看着像硬刹车，那就是「回弹生硬」的来源。 */
    transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s linear;
}
.lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    box-shadow: 0 20px 80px rgba(0,0,0,.6);
    display: block;
}
/* 对比层：inset:0 精确盖住主图。默认整幅裁掉（只看得到主图），
   开启对比后由 JS 写 clip-path 露出右边一段 —— 即「竖线左边主图、右边对比图」。 */
.lb-cmp {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: opacity .22s ease;
    pointer-events: none;
}
.lb-cmp > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lb-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 16px rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
    z-index: 4;
}
/* 竖线中间的小圆点，暗示「这里可以拖」 */
.lb-line::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.lightbox.compare-on .lb-cmp { opacity: 1; }
.lightbox.compare-on .lb-line { opacity: 1; }
.lb-close, .lb-prev, .lb-next {
    position: absolute;
    /* ★ 必须压在 .lb-stage（主图 + 对比层 + 竖线）之上。
       手机端 .lb-img 是 92vw、几乎铺满屏宽，左右只剩 17px，而箭头按钮本身 27px 宽
       （left:14）⇒ 一定和图片重叠；.lb-stage 在 DOM 里排在 #lbPrev 之后、两边 z-index 都是
       auto，于是主图把**左**箭头盖掉（#lbNext 排在 stage 之后所以看不出问题）。
       现象就是窄屏上「左箭头不见了，而且点不到」。 */
    z-index: 5;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: color .3s ease;
    font-weight: 200;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #fff; }
.lb-close { top: 22px; right: 30px; font-size: 42px; }
.lb-prev, .lb-next {
    top: 50%; transform: translateY(-50%); font-size: 60px; padding: 20px;
    /* 窄屏上箭头有近一半落在照片里，加一圈暗描边保证在白/亮照片上也看得清 */
    text-shadow: 0 0 3px rgba(0,0,0,.7), 0 2px 14px rgba(0,0,0,.9);
}
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-caption {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.75);
    font-size: 13px;
    letter-spacing: 2px;
}

/* ---------------- 空状态 ---------------- */
.empty-state {
    text-align: center;
    padding: 90px 20px;
    border: 1px dashed #d5d5d5;
}
.empty-state p { font-family: var(--serif); font-size: 20px; letter-spacing: 4px; color: #888; margin-bottom: 10px; }
.empty-state span { font-size: 12px; letter-spacing: 2px; color: #bbb; }

/* ---------------- 子页头 ---------------- */
.page-hero {
    background: var(--black);
    color: #fff;
    padding: 180px 0 90px;
}
.page-title {
    font-family: var(--serif);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 900;
    letter-spacing: 8px;
    margin-top: 10px;
}
.page-crumb { margin-top: 20px; font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.5); }
.page-crumb a:hover { color: #fff; }
.page-crumb i { margin: 0 12px; font-style: normal; opacity: .4; }

/* ---------------- 滚动显现 ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
    .masonry { grid-template-columns: repeat(3, 1fr); }
    .about-grid { grid-template-columns: 1fr; gap: 56px; }
    .about-qr { max-width: 320px; }
}

@media (max-width: 768px) {
    .section { padding: 64px 0; }
    .container { padding: 0 20px; }
    .header-inner { padding: 0 20px; }
    .section-head { margin-bottom: 40px; }

    /* --- 顶部导航 ---
       手机端菜单用「左对齐 + 中英分列两端 + 发丝分隔线」，
       原来用 justify-content:center，但各项宽度不等（"首页 HOME" 约 70px、
       "产品介绍 PRODUCTS" 约 131px），居中反而让六个起点参差 31px。 */
    .nav-toggle { display: flex; padding: 10px 8px; }
    .nav-toggle.nav-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.nav-on span:nth-child(2) { opacity: 0; }
    .nav-toggle.nav-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .main-nav {
        position: fixed;
        top: 76px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 2px 0 10px;
        box-shadow: 0 18px 32px rgba(0,0,0,.14);
        border-bottom: 1px solid var(--line);
        /* 横屏（视口高可能只有 390px）时菜单放得下不完，留个自身滚动兜底 */
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 22px;
        border-bottom: 1px solid var(--line);
        position: relative;
        color: var(--ink) !important;
    }
    .main-nav a:last-child { border-bottom: none; }
    .main-nav a::after { display: none; }
    .main-nav .nav-cn { font-size: 15px; letter-spacing: 2px; }
    .main-nav .nav-en { font-size: 9px; letter-spacing: 1.5px; opacity: .4; }
    /* 当前页：左侧一道黑竖条 + 中文加粗，不再用整幅灰底（灰带铺满而文字居中会显得脱节） */
    .main-nav a.active { background: none; }
    .main-nav a.active .nav-cn { font-weight: 700; }
    .main-nav a.active::before {
        content: "";
        position: absolute;
        left: 8px; top: 50%;
        width: 2px; height: 15px;
        background: var(--black);
        transform: translateY(-50%);
    }

    /* --- 「样图展示」的下拉：手机上一律改成「点一下展开」 ---
       ⚠️ 不能靠 hover：部分安卓浏览器把 hover 误报成 hover:hover，
          那样菜单会自己弹开、或者永远弹不开。默认收起、点了才展开最稳。 */
    .main-nav .nav-item { display: block; }
    .main-nav .nav-sub {
        position: static;
        top: auto; right: auto;
        min-width: 0;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        border-top: 0;
        background: #f7f8f9;
        padding: 2px 0 10px;
        display: none;
        z-index: auto;
    }
    .main-nav .nav-sub::before { display: none; }
    .main-nav .nav-item.open .nav-sub { display: block; }
    /* 手机端不靠 hover 展开：显式把桌面的悬停规则压回去（display 仍是 none） */
    .main-nav .nav-item:hover .nav-sub { opacity: 1; }

    .main-nav .nav-sub a { padding: 9px 22px 9px 36px; font-size: 14px; letter-spacing: 1px; }
    .main-nav .nav-sub-all { font-size: 13px; padding-top: 10px; }
    .nav-sub-row { display: block; padding: 0; }
    .main-nav .nav-sub-top { display: block; padding: 10px 22px 4px 36px; font-size: 13px; color: var(--grey); }
    .nav-sub-kids { display: block; }
    .main-nav .nav-sub-kids a { display: inline-block; padding: 5px 12px; margin-left: 26px; }
    /* 用英文后面的小箭头提示「这一项能展开」，这样不动「中英分列两端」的布局 */
    .nav-item.has-sub .nav-en::after { content: "  ▾"; font-size: 10px; }
    .nav-item.has-sub.open .nav-en::after { content: "  ▴"; }

    /* 菜单展开时：锁住页面滚动（否则手指在菜单上滑，底下内容跟着动） */
    body.nav-open { overflow: hidden; }
    /* 遮罩层：让用户看得出点哪里能收起，同时挡住下层元素避免误触。
       ⚠️ 它是 main.js 动态插到 <body> 上的独立元素，不是头部的伪元素 ——
       头部带 backdrop-filter，会成为 fixed 元素的包含块，挂在它上面的伪元素
       按 top:76px/bottom:0 算出来的高度是 76-76-0=0，等于没画（踩过）。
       层级：遮罩 z-index:1 < 头部 z-index:100 ⇒ 菜单永远在遮罩之上。 */
    .nav-scrim {
        position: fixed;
        top: 76px; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.32);
        z-index: 1;
    }
    body.nav-open .nav-scrim { display: block; }

    /* --- 首页 HERO：压缩间距 + 隐藏 SCROLL 提示（高度见文末 @supports 的 svh） --- */
    .hero { min-height: 520px; }
    .hero-label { font-size: 10px; letter-spacing: 3px; margin-bottom: 18px; }
    .hero-title { letter-spacing: 6px; }
    .hero-line { margin: 22px auto; }
    .hero-sub { font-size: 14px; letter-spacing: 2px; margin-bottom: 30px; }
    .hero-actions { gap: 12px; }
    .hero-actions .btn { padding: 12px 26px; font-size: 12px; letter-spacing: 2px; }
    .hero-scroll { display: none; }

    /* --- 子页头 --- */
    .page-hero { padding: 118px 0 56px; }
    .page-title { font-size: 28px; letter-spacing: 4px; line-height: 1.5; }
    .page-crumb { margin-top: 14px; font-size: 11px; letter-spacing: 1px; }
    .sec-en { letter-spacing: 3px; }
    .sec-no { font-size: 64px; top: -22px; }
    .sec-more { position: static; display: inline-block; margin-top: 12px; padding: 10px 0; }

    /* --- 作品墙（保持 2 列） --- */
    .masonry { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    /* 首页精选：换成「每排 2 张」的那一套（桌面两排的版本整块收起） */
    .works-rows--d { display: none; }
    .works-rows--m { display: flex; gap: 10px; }
    .works-row { gap: 10px; }
    .works-row--few { max-width: none; }
    .filter-bar { gap: 10px; margin-bottom: 32px; }
    .filter-btn { padding: 11px 18px; font-size: 12px; letter-spacing: 1px; }
    .filter-sub { gap: 10px; margin-top: 8px; }
    .filter-empty { padding: 40px 0; }

    /* --- 首页服务摘要：一行放不下，名字可换行、隐藏虚线点 --- */
    .service-row { flex-wrap: wrap; gap: 6px 12px; padding: 20px 8px; }
    .sr-name { flex: 1; min-width: 0; font-size: 17px; letter-spacing: 1px; }
    .sr-dots { display: none; }
    .sr-price { font-size: 14px; }

    /* --- 服务页：单列，避免 minmax(340px) 撑破容器 --- */
    .service-list { grid-template-columns: 1fr; }
    .service-block { padding: 28px 22px; }
    .sb-head { gap: 8px 12px; }
    .sb-no { font-size: 22px; }
    .sb-name { font-size: 17px; letter-spacing: 1px; }
    .sb-dots { display: none; }
    /* margin-left:auto 让价格即使换行也贴右，不至于和下方描述连成一片 */
    .sb-price { font-size: 14px; margin-left: auto; }
    .sb-desc { font-size: 13px; }
    .service-cta { margin-top: 48px; }

    /* --- 产品 / 动态 --- */
    .product-notes { margin-bottom: 40px; }
    .product-note { padding: 6px 0 6px 18px; }
    .product-note h3 { font-size: 17px; }
    .poster-grid { gap: 20px; }
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .news-body { padding: 20px 20px 24px; }
    .news-body h3 { font-size: 16px; }
    .news-row { gap: 18px; padding: 24px 12px; }
    .nr-day { font-size: 28px; }

    /* --- 关于 --- */
    .contact-rows { margin-top: 32px; }
    .contact-row { flex-direction: column; gap: 4px; padding: 16px 0; }
    .cr-label { min-width: 0; }
    .cr-value { font-size: 15px; }
    .about-qr { margin: 0 auto; }

    /* --- 文章 --- */
    .article-content { font-size: 15px; line-height: 1.95; }
    .article-cover { margin-bottom: 28px; }

    /* 图文模板在窄屏：三图降到两列，左右图文改成上下；间距整体收一档 */
    .article-content .art-fig,
    .article-content .art-cols,
    .article-content .art-media,
    .article-content .art-note { margin: 26px 0; }
    .article-content .art-cols { gap: 12px; }
    .article-content .art-cols--3 { grid-template-columns: 1fr 1fr; }
    .article-content .art-media,
    .article-content .art-media--right { grid-template-columns: 1fr; gap: 18px; }
    .article-content .art-quote { margin: 28px 0; font-size: 17px; }
    .article-content .art-divider { margin: 36px 0 18px; }
    .article-content .art-h { font-size: 18px; }
    .article-nav { margin-top: 48px; padding-top: 24px; gap: 16px; }
    .an-item em { font-size: 14px; }
    .pagination { margin-top: 40px; gap: 8px; }

    /* --- 其它 --- */
    .intro-stats { gap: 28px 40px; margin-top: 40px; }
    .stat-num { font-size: 40px; }
    .stat-num i { font-size: 22px; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-band { padding: 60px 0; }
    .footer-inner { padding: 52px 20px 36px; gap: 32px; }
    .footer-bottom { padding: 18px 20px; gap: 12px; }
    .footer-bottom a { display: inline-block; padding: 6px 0; }
    .empty-state { padding: 56px 16px; }

    /* --- 灯箱：留出浏览器底部工具栏的高度，说明文字上移 --- */
    .lb-img { max-width: 92vw; max-height: 68vh; }
    .lb-caption { bottom: 56px; max-width: 88vw; font-size: 12px; letter-spacing: 1px; text-align: center; }
    .lb-close { top: 10px; right: 14px; font-size: 38px; padding: 6px 10px; }
    .lb-prev, .lb-next { font-size: 34px; padding: 8px; }
}

/* 更窄的小屏（≤480px）：再收一档 */
@media (max-width: 480px) {
    .hero-title { font-size: 36px; letter-spacing: 4px; }
    .hero-label { font-size: 9px; letter-spacing: 2px; }
    .page-title { font-size: 24px; letter-spacing: 3px; }
    .sec-no { font-size: 52px; top: -16px; }
    .masonry { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-num { font-size: 34px; }
    .stat-num i { font-size: 19px; }
    .stat-label { font-size: 11px; letter-spacing: 2px; }
    .service-block { padding: 24px 18px; }
    .news-body { padding: 18px 16px 20px; }
    .footer-inner { padding: 44px 18px 30px; }
}

/* 触屏设备（没有鼠标悬停）——用能力判断，而不是按屏幕宽度判断，
   这样桌面浏览器把窗口拉窄也不会被误伤 */
@media (hover: none) {
    /* 作品墙的分类与标题：改为常显，否则手机上永远看不到 */
    .masonry-item figcaption { opacity: 1; transform: none; padding: 22px 10px 9px; }
    .fi-cat { font-size: 9px; letter-spacing: 1px; }
    .fi-title { font-size: 12px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* 新闻封面见上方 .news-cover img 的说明：默认就是彩色，这里不需要再取消灰度 */

    /* 触屏点按后 :hover 状态会残留，去掉会"卡住"的缩放 */
    .masonry-item:hover img,
    .poster-item:hover img { transform: none; }
}

/* HERO 高度：用 svh（小视口高度，会扣掉手机地址栏），不支持时自动退回上面的 100vh */
@supports (height: 100svh) {
    .hero { height: 100svh; }
}

/* 灯箱图片高度：dvh 跟随地址栏变化，避免底部被浏览器工具栏盖住 */
@supports (height: 1dvh) {
    .lb-img { max-height: 84dvh; }
    @media (max-width: 768px) {
        .lb-img { max-height: 68dvh; }
    }
}