/* ============================================================
   影忆数码 — 双站入口页 / 建设中页 专用样式
   ------------------------------------------------------------
   为什么单独一个文件、不直接用主站的 style.css：
     入口页是"门面"，要保证在任何情况下都能打开。主站 style.css 里
     塞满了导航、作品墙、灯箱、后台控件等规则，改一处就可能波及这里；
     而入口页只用到：色板 / 衬线标题 / 发丝线 / 字距 —— 复刻这四样的
     成本远低于继承整份样式带来的风险。
   ★ 色值与主站保持一致（--black #0a0a0a、--line #e5e5e5），
     所以从入口页点进影像站不会有"换了个网站"的割裂感。
   ============================================================ */

:root {
    --black: #0a0a0a;
    --ink: #1a1a1a;
    --grey: #8a8a8a;
    --line: #e5e5e5;
    --paper: #f4f4f1;       /* 影像侧的纸感底（比纯白暖一档） */
    --paper-hover: #ecebe5;
    --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;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

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

/* 手机上点链接会先闪一层半透明色块（安卓 Chrome 灰、国产内核偏蓝）。
   入口页两张卡片都是整块可点，闪一下特别显眼 —— 关掉。
   ★ 该属性不继承，必须写在被点的元素上。 */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------------- 页头：品牌标题 ---------------- */
.pf-head {
    padding: clamp(26px, 4.6vh, 54px) clamp(22px, 4.6vw, 72px) clamp(16px, 2.6vh, 28px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 32px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.pf-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: .16em;
    /* 字距会把整行往右撑出 .16em，末字右侧留白比左侧大 ⇒ 用负右边距抵回来，
       左对齐时视觉上才真的贴住版心边线。 */
    margin-right: -.16em;
}

.pf-sub {
    margin-top: 12px;
    font-size: clamp(12px, 1.05vw, 13px);
    letter-spacing: .24em;
    color: var(--grey);
}

.pf-meta {
    text-align: right;
    font-size: 10px;
    letter-spacing: .3em;
    line-height: 2.1;
    color: #b9b9b9;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------- 两张入口卡 ---------------- */
.pf-gates {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

.gate {
    position: relative;
    overflow: hidden;
    isolation: isolate;             /* 让下面 z-index:-1 的装饰层只在本卡片内叠加 */
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 4vh, 44px) clamp(22px, 3.4vw, 58px) clamp(26px, 4.4vh, 46px);
    min-height: 300px;
    transition: background-color .55s ease;
}

.gate + .gate { border-left: 1px solid rgba(0, 0, 0, .09); }

/* 卡内所有真实内容都要压在装饰层之上 */
.gate-no,
.gate-body,
.gate-go { position: relative; z-index: 1; }

/* --- 01 影像定制服务：纸感底 + 底片齿孔 + 镜头光圈 --- */
.gate-img {
    background: var(--paper);
    color: var(--ink);
}

/* 左边缘一列短横线 = 35mm 负片的片孔（纯 CSS，不引图片） */
.gate-img::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    width: 13px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, .12) 0 9px,
        transparent 9px 27px
    );
    z-index: 0;
}

/* 右下角同心细环 = 镜头光圈（同样是纯 CSS） */
.gate-img::after {
    content: "";
    position: absolute;
    right: clamp(-130px, -9vw, -60px);
    bottom: clamp(-130px, -9vw, -60px);
    width: clamp(270px, 30vw, 420px);
    height: clamp(270px, 30vw, 420px);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 0 32px rgba(0, 0, 0, .015),
                inset 0 0 0 33px rgba(0, 0, 0, .07);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
    z-index: 0;
}

/* --- 02 编程定制开发：深底 + 代码网格 + 符号水印 --- */
.gate-dev {
    background-color: var(--black);
    color: #f2f2f2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px;
    border-left-color: rgba(255, 255, 255, .12);
}

/* 右下角一串代码符号做水印：等宽字体、极低对比，只是"质感"，不抢字。
   ★ 定为"右下 + 完整可见"：早先让它通栏居左、底部出血，结果 ① 被底边裁掉半截像渲染残缺，
     ② 和左下角的「进入 →」撞在一起。现在缩到短串、贴右下角，两个问题一起没了。 */
.gate-dev::after {
    content: "</>  { }";
    position: absolute;
    right: clamp(14px, 2vw, 34px);
    bottom: clamp(12px, 2vw, 30px);
    font-family: var(--mono);
    font-size: clamp(38px, 4.6vw, 76px);
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .06);
    transition: color .55s ease;
    pointer-events: none;
    z-index: 0;
}

/* --- 卡内文字 --- */
.gate-no {
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: .34em;
    opacity: .45;
}

/* margin-top:auto 把文字块推到卡片下半部，编号留在顶部 ⇒ 竖向呼吸更大 */
.gate-body { margin-top: auto; }

.gate-cn {
    display: block;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.4;
    letter-spacing: .1em;
    margin-top: 14px;
}

.gate-en {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: .3em;
    opacity: .5;
}

.gate-desc {
    display: block;
    margin-top: 20px;
    font-size: 13px;
    letter-spacing: .1em;
    line-height: 1.95;
    opacity: .62;
}

.gate-go {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    font-size: 12px;
    letter-spacing: .26em;
}

.gate-go .arw {
    display: inline-block;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* 键盘 Tab 到卡片时给个明确焦点框（整卡可点，不给的话键盘用户会迷路） */
.gate:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -8px;
}

/* ---------------- 页脚细条 ---------------- */
/* ★ 字号与颜色按 2026-10-28 的要求调整：原来是 10px 浅灰，太轻，站在入口页上几乎看不见；
   现在 14px 纯黑，左边品牌用衬线、右边备案号带下划线，一眼能读到。 */
.pf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 18px clamp(22px, 4.6vw, 72px);
    border-top: 1px solid var(--line);
    background: #fff;
    font-size: 14px;
    letter-spacing: .12em;
    color: var(--black);
}

.pf-foot-brand {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: .18em;
}

/* 备案号：整段就是链接，点开去工信部备案查询 */
.pf-foot-icp {
    color: var(--black);
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    padding-bottom: 2px;
    transition: opacity .3s ease, border-color .3s ease;
}

/* ============================================================
   悬停效果：只给"真的有鼠标"的设备
   ------------------------------------------------------------
   手机/平板上没有可靠的 hover（部分安卓内核会把 hover 误报成可用，
   点一下之后卡片就"卡"在悬停态）。所以默认就是最终样子，
   悬停只作为桌面的额外反馈。
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .gate-img:hover { background: var(--paper-hover); }
    .gate-img:hover::after { transform: scale(1.06); }
    .gate-dev:hover { background-color: #131313; }
    .gate-dev:hover::after { color: rgba(255, 255, 255, .1); }
    .gate:hover .gate-go .arw { transform: translateX(12px); }
}

/* ============================================================
   窄屏：两张卡片改为上下堆叠
   ------------------------------------------------------------
   ★ 不用"左右各半"硬挤：手机上每侧不足 190px，中文标题会折成两三行。
     改为整宽上下排，编号、标题、箭头仍在，阅读顺序与桌面一致（先影像后代码）。
   ============================================================ */
@media (max-width: 860px) {
    .pf-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 24px 22px 18px;
    }

    .pf-meta {
        text-align: left;
        font-size: 9px;
        letter-spacing: .26em;
        line-height: 1.9;
        white-space: normal;
    }

    .pf-gates { grid-template-columns: 1fr; }

    .gate {
        min-height: 0;
        padding: 32px 22px 36px;
    }

    /* 上下堆叠后，分隔线要横过来；深色卡片自带边界，不需要再画一条 */
    .gate + .gate { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .09); }
    .gate-dev { border-top: 0; }

    .gate-no { font-size: 11px; }
    .gate-cn { font-size: 26px; margin-top: 10px; }
    .gate-en { margin-top: 8px; }
    .gate-desc { margin-top: 15px; font-size: 12.5px; line-height: 1.85; }
    .gate-go { margin-top: 20px; }

    /* ★ 影像侧左边有一列底片齿孔（width 13px, left 9px），窄屏上 22px 的内边距
       会让「01」正好压在齿孔上 —— 单独把影像卡的内容右推，代码卡不受影响。 */
    .gate-img { padding-left: 36px; }
    .gate-img::before { left: 7px; width: 10px; }

    /* 镜头光圈环在 390 宽下原本直径 270px、几乎横穿整张卡，压在说明文字上。
       窄屏缩到 190px 并往右下角再挪出去，只留一个弧边做质感。 */
    .gate-img::after {
        width: 190px;
        height: 190px;
        right: -74px;
        bottom: -74px;
    }

    /* 手机上卡片不再是满屏高，margin-top:auto 会把文字顶到贴底，
       这里改回自然流，靠 padding 控呼吸 */
    .gate-body { margin-top: 16px; }

    .pf-foot { padding: 14px 22px; font-size: 13px; letter-spacing: .1em; }
}

/* 很矮的横屏（如手机横放）：卡片压缩，保证两张都能露出来 */
@media (max-height: 520px) and (min-width: 861px) {
    .gate { min-height: 0; padding-top: 20px; padding-bottom: 22px; }
    .gate-cn { font-size: 22px; margin-top: 8px; }
    .gate-desc { margin-top: 12px; font-size: 12px; }
    .gate-go { margin-top: 16px; }
}

/* ============================================================
   「建设中」页（dev.php）
   ------------------------------------------------------------
   编程定制开发这一侧还没有独立站点，先给一个同语言的过渡页，
   避免访客点到 404。深底 + 代码网格，与入口页 02 号卡片同源。
   ============================================================ */
.pf-dev {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 9vh, 110px) clamp(22px, 6vw, 96px);
    background-color: var(--black);
    color: #f2f2f2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px;
    position: relative;
    overflow: hidden;
}

.pf-dev-back {
    position: absolute;
    top: clamp(22px, 4vh, 40px);
    left: clamp(22px, 6vw, 96px);
    font-size: 11px;
    letter-spacing: .26em;
    color: rgba(255, 255, 255, .55);
    transition: color .35s ease;
}
.pf-dev-back:hover { color: #fff; }

.pf-dev-no {
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: .34em;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 18px;
}

.pf-dev-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.3;
    letter-spacing: .1em;
}

.pf-dev-en {
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: .3em;
    color: rgba(255, 255, 255, .45);
}

.pf-dev-text {
    margin-top: 30px;
    max-width: 620px;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .72);
}

.pf-dev-text--dim {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

.pf-dev-actions {
    margin-top: 42px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.pf-dev-btn {
    display: inline-block;
    padding: 13px 34px;
    font-size: 12px;
    letter-spacing: .24em;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.pf-dev-btn:hover { background: #fff; color: var(--black); border-color: #fff; }

.pf-dev-btn--ghost { border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .72); }
.pf-dev-btn--ghost:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }

@media (max-width: 860px) {
    .pf-dev { padding: 90px 22px 60px; justify-content: flex-start; }
    .pf-dev-back { top: 26px; left: 22px; }
    .pf-dev-title { font-size: 28px; }
    .pf-dev-text { margin-top: 22px; font-size: 13.5px; }
    .pf-dev-actions { margin-top: 32px; }
    .pf-dev-btn { padding: 12px 26px; }
}