/* =============================================================================
   贴恋 · 婚礼策划服务展示（深圳加热科技有限公司）
   源文件: figma.com/design/4qE3B4GnAwQ0m9z3dPoCm4  node 205114:6638
   画板: 1652 x 3641，底色 #fee6f5

   🔴 **4 张手机截图里有 3 张是画板外的兄弟节点**（`image 2886` / `2888` / `2890`，
      z-index 419/420/422 高于画板的 399，visible:true）。`get_metadata` 打画板只返
      画板内的 11 个节点、**看不到它们**，`get_screenshot`（contentsOnly=true/false 都试过）
      也没把它们画出来 —— 光看渲染图会以为这稿只有 1 张截图、中间三大块是留白。
      判据 = 用 `use_figma` 读 `board.parent.children` 里与画板矩形相交的兄弟节点。
      （lianwen-www 漏掉画板外导航是同一个坑，那次是靠客户截图才发现的。）

   >=1672px   完全按 Figma 绝对坐标渲染，像素级还原
   768-1671px 整体等比缩放（zoom），版式不变
   <768px     单栏流式布局（移动端适配，非原稿版式）

   注意：不引 Google Fonts —— 展示机在国内，fonts.googleapis.com 会被墙掉导致首屏阻塞。
   原稿标题/正文字体是 Abhaya Libre Regular（西文字体，中文由 Figma 回落到系统 CJK 黑体），
   导航与「下载」是 Source Han Sans CN Bold，品牌字「贴恋」是 Inter Regular（同样回落 CJK），
   这里一律用系统 CJK 栈，正文 400 / 导航 700。

   🔴 各处 top / left 不是 Figma 节点的 x,y，而是**按节点的 `absoluteRenderBounds`（墨迹框）
      反推**的：CSS 行盒的 ascent 与 Figma 回退字体有差，照抄节点 y 会整体偏移。
      注释里标的 “墨迹 y=” 就是校准靶子，改字号 / 行高必须连 top 一起重算。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* html 也要 overflow-x:hidden —— 只给 body 设，缩放档位有零头时
   documentElement 仍会横向溢出 */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body { margin: 0; background: #fee6f5; overflow-x: hidden; }

h1, h2, p { margin: 0; font-weight: inherit; }

img { display: block; }

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

:root {
  --f-han: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
           "Microsoft YaHei", sans-serif;

  --c-bg:      #fee6f5;   /* 画板底色 */
  --c-ink:     #000;      /* 标题 / 正文 */
  --c-nav-cur: #151515;   /* 导航当前项「首页」——🔴 实测墨色，不是导出的 #d9d9d9，
                             那个值在粉底上几乎看不见（8 个兄弟站踩过同一个坑） */
  --c-nav-ink: #282626;   /* 导航其余项 */
  --c-cta-bg:  #10100e;   /* 「下载」胶囊按钮底 */
  --c-cta-ink: #fff;      /* 「下载」字色（原稿就是纯白） */
}

.canvas { background: var(--c-bg); }

.stage { width: 1652px; margin: 0 auto; }

.page {
  position: relative;
  width: 1652px;
  height: 3641px;
}

/* section 不参与定位，子元素直接相对 .page 绝对定位 */
.page section { position: static; }

/* .pair 只在窄屏才是真容器，宽屏让两张图各自按原稿坐标定位 */
.pair { display: contents; }

/* ============================== 顶部导航 ============================== */
.nav {
  position: absolute;
  left: 0; top: 0;
  width: 1652px; height: 170px;
}

/* logo 原稿是 148x151 圆角 50 的矩形 + FILL 模式图片；裁切与圆角已烤进 assets/logo.png
   （2x = 296x302，带 alpha），这里 1:1 显示即可。
   🔴 width/height 填**原稿显示框**，不是位图尺寸 —— 位图正好是它的两倍
      （忆念/甜芙/别姬/悟创楠 四站首版把 2x 位图尺寸当 CSS 尺寸写，整页图片放大一倍）。 */
.nav-mark {
  position: absolute;
  left: 24px; top: 19px;
  width: 148px; height: 151px;
  border-radius: 50px;
}

/* 品牌字「贴恋」：原稿 64px、固定行高 32px，故墨迹顶(76.24)反而在节点 y(91)之上 14.76px。
   这里用 line-height:1 + 按墨迹校准的 top，不去复刻那个会溢出行盒的固定行高。 */
.nav-word {
  position: absolute;
  left: 299px; top: 71.2px;        /* 原稿节点 x=299 y=91；靶子=墨迹 x=301.4 y=76.2 */
  font-family: var(--f-han);
  font-size: 64px; font-weight: 400; line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
}

/* 三个导航项是原稿 frame 205114:6662 里 gap:60 的 flex；给定宽度后
   算出来的绝对位置正好是 647 / 752 / 902，与原稿逐项一致 */
.nav-links {
  position: absolute;
  left: 647.8px; top: 83.8px;      /* 原稿框 x=647 y=78.5 h=33；靶子=墨迹 x=648.1 y≈85.7 */
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.nav-links a {
  font-family: var(--f-han);
  font-size: 22px; font-weight: 700; line-height: 1;
  letter-spacing: 0.66px;
  color: var(--c-nav-ink);
  white-space: nowrap;
  transition: opacity .2s;
}

.nav-links a:nth-child(1) { width: 45px; }
.nav-links a:nth-child(2),
.nav-links a:nth-child(3) { width: 90px; }

.nav-links a.is-current { color: var(--c-nav-cur); }

.nav-links a:hover { opacity: .6; }

.nav-cta {
  position: absolute;
  left: 1254px; top: 67px;
  width: 120px; height: 56px;
  border-radius: 40px;
  background: var(--c-cta-bg);
  color: var(--c-cta-ink);
  font-family: var(--f-han);
  font-size: 20px; font-weight: 700; line-height: 56px;
  text-align: center;
  transition: opacity .2s;
}

.nav-cta:hover { opacity: .85; }

/* ============================== 标题 ============================== */
.tt {
  position: absolute;
  color: var(--c-ink);
  font-family: var(--f-han);
  font-size: 64px; font-weight: 400; line-height: 1;
  letter-spacing: 1.92px;   /* 原稿是 3%，64px 下 = 1.92px */
  white-space: nowrap;
}

/* tt-1 原稿节点 x=124，但文案前有一个半角空格（` 一场温柔的婚礼策划`），HTML 会折叠掉，
   故把那段 advance 加进 left；靶子是墨迹 x=140.92。 */
.tt-1 { left: 139px;   top:  405px; }     /* 靶子=墨迹 x=140.9 y=411.0 */
.tt-2 { left: 826px;   top: 1363.2px; }   /* 靶子=墨迹 x=827.2 y=1368.2 */
.tt-3 { left: 355px;   top: 2178.9px; }   /* 靶子=墨迹 x=356.1 y=2183.9（原稿节点 x=354，本机首字左边距更小，+1 补齐） */

/* ============================== 正文 ============================== */
/* 🔴 行高 47px 是从原稿墨迹框反推的：两行块墨高 84.08、十行块墨高 459.92
      ⇒ (459.92 − 84.08) / 8 = 46.98。不是「框高 ÷ 行数」猜的。
   🔴 换行点由「width + letter-spacing」决定，**一律不加 <br>**
      （txt-3 里那个 <br> 是原稿自带的 U+2028 硬换行，属例外）。 */
.txt {
  position: absolute;
  color: var(--c-ink);
  font-family: var(--f-han);
  font-size: 40px; font-weight: 400; line-height: 47px;
  letter-spacing: 1.2px;    /* 原稿是 3%，40px 下 = 1.2px */
}

/* 939 ÷ (40 + 1.2) = 22.8 → 22 / 8 字两行，与原稿逐行一致 */
.txt-1 { left: 17px;  top:  768.2px; width: 939px; }   /* 靶子=墨迹 x=18.4 y=773.2 */

/* 原稿框宽 1250（右边缘 1833 已经冲出画板），但内容只有一行 1000px；
   这里改用 nowrap 不设宽度，元素右缘 1583 < 1652，不会横向溢出 */
.txt-2 { left: 583px; top: 1558.2px; white-space: nowrap; } /* 靶子=墨迹 x=585.3 y=1564.2 */

/* 255 ÷ 41.2 = 6.19 → 每行 6 字；两句之间是原稿的硬换行。
   第 6 行只有 5 字（「面向平台用」）是 CJK 禁则：第 6 字后面跟着「，」，
   不许出现在行首，所以「户」被拉到下一行 —— 浏览器与 Figma 行为一致，别硬写 <br>。
   十行合计墨高 459.92，落在 2629.3 ~ 3089.2，超出原稿框高 368 是原稿本来就溢出。 */
.txt-3 { left: 652px; top: 2623.3px; width: 255px; }   /* 靶子=墨迹 x=653.4 y=2629.3 */

/* ============================ App 截图 ============================ */
/* 🔴 width/height 一律填**原稿显示框（1x）**，位图是它的约 1.8 倍。
      4 张原图都是 941x1672 PNG（共 8.7M，对国内展示机太重），已转 JPEG q85（共 ~1.0M）。 */
.ph {
  position: absolute;
  object-fit: cover;
}

.ph-home   { left: 995px; top:  264px; width: 513px; height: 912px; }   /* 画板外节点 image 2886 */
.ph-cases  { left:   0;   top: 1207px; width: 507px; height: 901px; }   /* 画板内节点 image 2887 */
.ph-orders { left:  65px; top: 2538px; width: 528px; height: 938px; }   /* 画板外节点 image 2888 */
.ph-mine   { left: 988px; top: 2538px; width: 528px; height: 938px; }   /* 画板外节点 image 2890 */

/* ======================= 中屏：整体等比缩放 ======================= */
/* zoom 而非 transform:scale —— zoom 会带动布局高度，页面不会留白 */
/* 🔴 每档的 zoom 按该区间**最窄**的视口算：(下界 − 20px 滚动条余量) ÷ 1652，
      否则档内最窄那几像素会横向溢出。
   🔴 第一档的上界是 1671 不是 1651 —— 媒体查询比的是**视口宽（含滚动条）**，而能放下画板的是
      **内容区宽**。视口 1652 时内容区只有 1637（滚动条吃掉 15px），仍按 zoom:1 渲染就横向溢出。
      1671 = 1652 + 19px 滚动条余量（macOS 15px / Windows 17px 都兜住）。 */
@media (max-width: 1671px) { .stage { zoom: .95; } }
@media (max-width: 1600px) { .stage { zoom: .89; } }
@media (max-width: 1500px) { .stage { zoom: .83; } }
@media (max-width: 1400px) { .stage { zoom: .77; } }
@media (max-width: 1300px) { .stage { zoom: .71; } }
@media (max-width: 1200px) { .stage { zoom: .65; } }
@media (max-width: 1100px) { .stage { zoom: .59; } }
@media (max-width: 1000px) { .stage { zoom: .53; } }
@media (max-width:  900px) { .stage { zoom: .48; } }
@media (max-width:  820px) { .stage { zoom: .45; } }

/* ========================= 窄屏：单栏流式 ========================= */
/* 原稿是 1652 宽的桌面画板，手机上按 DOM 顺序重排，不再还原绝对坐标 */
@media (max-width: 767px) {
  .stage { zoom: 1; width: 100%; }

  .page {
    width: 100%;
    height: auto;
    padding: 96px 20px 48px;   /* 顶部留给绝对定位的 .nav（72px）+ 24px 呼吸 */
  }

  /* 导航压成固定高度的普通栏；窄屏放不下三个导航项，收起，只留下载按钮
     （联系方式在页脚，「关于我们」的内容本身就在下面） */
  .nav { left: 0; top: 0; width: 100%; height: 72px; }

  .nav-mark { left: 14px; top: 12px; width: 48px; height: 49px; border-radius: 16px; }

  .nav-word {
    left: 74px; top: 12px;
    height: 49px;
    font-size: 28px; line-height: 49px;
  }

  .nav-links { display: none; }

  .nav-cta {
    left: auto; right: 14px; top: 17px;
    width: 88px; height: 38px;
    font-size: 15px; line-height: 38px;
  }

  .page section {
    display: block;
    margin-bottom: 44px;
  }

  .tt, .txt, .ph {
    position: static;
    white-space: normal;
    width: auto;
  }

  .tt {
    font-size: 24px; line-height: 1.5; letter-spacing: .6px;
    margin-bottom: 10px;
  }

  .txt {
    font-size: 15px; line-height: 1.7; letter-spacing: .4px;
  }

  .ph {
    width: 100%; max-width: 240px; height: auto;
    margin: 20px auto 0;
    border-radius: 8px;
  }

  /* 「我的订单」「个人中心」两张并排 */
  .pair {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
  }

  .pair .ph { margin: 0; max-width: 46%; }
}

/* ================================ 页脚 ================================ */
/* 版式与 jiare-www 同款；主体信息是**深圳加热科技**自己的，别抄兄弟站 */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, .72);
  font-family: var(--f-han);
  padding: 40px 24px;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.9;
}

.site-footer__corp {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.site-footer__addr,
.site-footer__contact {
  font-size: 13px;
}

.site-footer__sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, .35);
}

.site-footer__icp {
  margin-top: 8px;
  font-size: 13px;
}

.site-footer__icp a {
  color: rgba(255, 255, 255, .72);
  transition: color .2s;
}

.site-footer__icp a:hover { color: #fff; }

@media (max-width: 767px) {
  .site-footer { padding: 28px 16px; }
  .site-footer__corp { font-size: 15px; }
  .site-footer__addr,
  .site-footer__contact,
  .site-footer__icp { font-size: 12px; }
  /* 窄屏把「手机号 | 邮箱」拆成两行，竖线隐藏。
     🔴 隐藏那条必须写成 `.site-footer__contact .site-footer__sep`（提高优先级）：
        单写 `.site-footer__sep`（0,1,0）打不过上一行的 `.site-footer__contact span`（0,1,1），
        竖线会变成 block 单占一行 —— lianwen / ruanying / yunian 三站现网就是那个写法。 */
  .site-footer__contact span { display: block; }
  .site-footer__contact .site-footer__sep { display: none; }
}