@charset "UTF-8";
/* ==========================================================================
   三月初九美甲 · 新中式精品店（北京大兴龙湖天街店）  官网样式
   设计语言：新中式 · 米白 + 墨 + 金。无 JavaScript 依赖。
   改动要点：颜色都在 :root 变量里，改一处全站生效。
   ========================================================================== */

:root {
  --ink:    #241F1A;   /* 墨：正文与标题 */
  --ink2:   #4A443C;   /* 次级正文 */
  --muted:  #8A8279;   /* 辅助说明 */
  --line:   #E6DECF;   /* 细线 */
  --line2:  #F0E9DD;   /* 更浅的线 */
  --cream:  #F8F4ED;   /* 米白底 */
  --cream2: #FBF8F3;   /* 卡片底 */
  --white:  #FFFFFF;
  --gold:   #B08D57;   /* 金：强调 */
  --gold-l: #C9A96A;
  --red:    #8E3B3B;   /* 朱 */
  --green:  #33544A;   /* 松绿 */

  /* 全站字体（2026-10-15 定：黑体）。只在这里定义一次，页面里不许再写 font-family；
     想整站换字体，改 --font 这一行就够。顺序＝优先用哪台设备上的哪个字体：
       Mac / iPhone → 苹方 PingFang SC；Windows → 微软雅黑；安卓 → Noto Sans SC；再退到系统默认。
     为什么用黑体：宋体在 iPhone 上是宋体-简、Windows 上是中易宋体、安卓上退成系统衬线字，
     同一个标题三台设备三种样子；黑体各家都有，观感最稳。2026-10-15 试过一轮宋体（老板看后
     觉得不好看，当天定回黑体）。 */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  --wrap: 1120px;
  --r: 2px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  /* 行高：中文正文 1.8 上下最好读；原来 1.9 配合宽行会显得松散。 */
  line-height: 1.85;
  letter-spacing: .01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* 中文折行：标点避头尾更严格（不让「，。」跑到行首），长串英文数字不撑破行宽。 */
  line-break: strict;
  overflow-wrap: break-word;
  /* 行首若是全角括号/引号，收掉那一点多余留白，让左边缘对齐（Chrome 支持，其它浏览器忽略）。 */
  text-spacing-trim: trim-start;
  /* 段落最后一行只剩两三个字时自动回头调匀，避免「孤字」（Chrome 支持）。 */
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }
.rounded { border-radius: var(--r); border: 1px solid var(--line); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* 标题：字重 600 分层；行高收一点，多行标题更成块；
   text-wrap: balance 让两行标题自动断得更匀，不会出现第二行只有两个字的情况。 */
h1, h2, h3, h4 {
  font-weight: 600; letter-spacing: .04em; margin: 0;
  line-height: 1.35; text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.4vw, 50px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(19px, 2.1vw, 23px); }
h4 { font-size: 17px; }

p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.4em; }
li { margin-bottom: .5em; }
/* 标题与紧跟其后的正文之间留一口气（.sec-head 里已另有更宽的间距，优先级更高） */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: .55em; }
h2 + h3, h2 + h4 { margin-top: 1.1em; }
/* 行宽：中文一行 38 字左右最舒服。1120px 容器里一行能排 65 字，太长了，
   所以给正文段落与不带 class 的纯文本列表收一个上限；网格卡片、表格、图注本来就更窄，不受影响。 */
p, ul:not([class]), ol:not([class]) { max-width: 38em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
.center { text-align: center; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--ink); color: #fff; padding: 10px 16px; }

/* ---------------------------------------------------------------- 页头 */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { height: 40px; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-txt b { font-weight: 500; font-size: 17px; letter-spacing: .10em; }
.brand-txt span { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
/* 手机上页头要占两行导航，高度接近屏幕的四分之一；此时不做吸顶，避免挡住正文。 */
@media (max-width: 620px) {
  .site-head { position: static; }
  /* 375px 及更窄的屏幕上，字标＋「美甲·美睫·美肤」＋地址会顶出屏幕，这里整体收一档并允许换行。 */
  .head-inner { padding-left: 18px; padding-right: 18px; gap: 14px; position: relative; }
  /* 导航右端渐隐，提示「还能往右滑」——否则用户只会看到 4 个就以为就这些了。 */
  .head-inner::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(248,244,237,0), rgba(248,244,237,.96));
  }
  .brand { flex: 0 1 auto; min-width: 0; gap: 10px; }
  .brand img { height: 34px; }
  .brand-txt { min-width: 0; }
  .brand-txt b { font-size: 15px; letter-spacing: .08em; }
  .brand-txt span { font-size: 10.5px; letter-spacing: .04em; }
}

.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  padding: 7px 12px; font-size: 14.5px; color: var(--ink2);
  border-bottom: 1px solid transparent; white-space: nowrap;
}
/* 导航加了「人才招聘」变9 项，1440px 下原来每项12px 内边距刚好挤满、
   右边顶到容器边缘。这里收一点内边距与间距，9 项在桌面端也能一行放下
   （2026-10-15 加招聘入口后调整）。 */
@media (min-width: 1180px) {
  .nav a { padding: 7px 9px; font-size: 14px; }
  .nav { gap: 0; }
  .head-inner { gap: 20px; }
}
.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------- 首屏 */
/* 原来的遮罩是 rgba(24,20,16,.90)→.30，从左往右。那层90% 的黑几乎把照片全吃掉了，
   首屏渲染出来是一块死黑（2026-10-15 实测）。改成：左上角一团柔和的暗，往右下角
   淡出——文字压在左上，照片的拱形灯带和工位从右侧透出来，图才算没白传。 */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* 两层：① 斜向的，让右侧的灯带透出来；② 左侧竖向的一片压暗，
     保证标题和正文始终落在足够暗的底上，不会因为换一张亮照片就读不清。 */
  background:
    linear-gradient(100deg, rgba(24,20,16,.62) 0%, rgba(24,20,16,.30) 46%, rgba(24,20,16,.08) 100%),
    linear-gradient(90deg, rgba(24,20,16,.90) 0%, rgba(24,20,16,.68) 38%, rgba(24,20,16,.20) 72%, rgba(24,20,16,0) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
/* 宽度只给正文lede，标题不设上限——之前顺手把整个 hero-body 限到 640px，
   标题被挤成三行、断得很难看（2026-10-15）。 */
.hero-body { position: relative; color: var(--cream); padding: clamp(64px, 9vw, 116px) 0 clamp(96px, 11vw, 140px); }
.hero-body h1 {
  color: #fff; margin-bottom: .5em; text-shadow: 0 1px 30px rgba(0,0,0,.35);
  /* 标题只占左半屏，刚好排成两行：「三月初九美甲 · 新中式精品店」/「（北京大兴龙湖天街店）」。
     不加这条约束的话，窄一点的屏幕上「美甲」和「·」会被拆到两行（2026-10-15）。 */
  max-width: 15em;
}
/* 括号那行店名比主标题弱一档（原来是同样大小，第二行反而更抢眼） */
.h1-sub { font-size: .62em; color: #EFE7DA; font-weight: 500; }
/* 「美甲」与「新中式精品店」之间的间隔号。原来靠   加一个空格，
   手机上会连成「美甲· 新中式」这种半宽半全角混排，这里改成独立的类，单独控宽度。 */
.h1 .dot { color: var(--gold-l); font-weight: 400; }
@media (max-width: 620px) { .h1 .dot { display: inline-block; width: 1.1em; } }
.hero-body .lede { font-size: clamp(15.5px, 1.6vw, 18.5px); color: #E8DFD1; max-width: 38em; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.hero-body .lede strong { color: #fff; font-weight: 500; }

/* 首屏右下的三个关键数字 */
.hero-facts {
  position: absolute; right: 24px; bottom: 26px; z-index: 3;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 34px; align-items: flex-end;
}
.hero-facts li { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-facts b {
  font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: .01em;
  color: var(--gold-l); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 18px rgba(0,0,0,.5);
}
.hero-facts span { font-size: 12px; line-height: 1.55; color: #DED4C4; letter-spacing: .06em; }
@media (max-width: 900px) { .hero-facts { display: none; } }

.eyebrow {
  font-size: 12.5px; letter-spacing: .28em; color: var(--gold-l);
  margin-bottom: 14px; text-transform: none;
}
.kicker { font-size: 12.5px; letter-spacing: .26em; color: var(--gold); margin-bottom: 12px; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-block; padding: 12px 26px; font-size: 15px; letter-spacing: .06em;
  border: 1px solid var(--gold); color: var(--ink); background: transparent;
  transition: background .18s, color .18s;
}
.btn:hover { background: var(--gold); color: #fff; }
/* 深色底（首屏大图、页头图）上的描边按钮才加 .btn-on-dark。
   默认的深色字是给浅色底用的：浅色底上用浅色字会与背景同色，
   鼠标不划过就看不见（2026-10-15 修过一次，别再改回去）。 */
.btn-on-dark { color: var(--cream); }
.btn-on-dark:hover { color: #fff; }
.btn-solid { background: var(--gold); color: #fff; }
.btn-solid:hover { background: var(--gold-l); border-color: var(--gold-l); color: #fff; }
.btn-ink { border-color: var(--ink); color: var(--ink); }
.btn-ink:hover { background: var(--ink); color: var(--cream); }

/* ---------------------------------------------------------- 内页页头 */
/* 原来图只给 30% 不透明度、再叠一层 .50→.82 的黑，背景图基本只剩剪影。
   跟首页首屏同一个毛病，这里一起修：图提到 42%，遮罩改成左上深、右下浅，
   照片里的灯带和招牌能透出来，标题那侧仍然够暗。 */
.page-head { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); }
.page-head .bg { position: absolute; inset: 0; }
.page-head .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
/* 招聘页的背景是竖幅人物照。照片里人物偏左下、右上是品牌墙的字，
   取景要让人物落在画面右侧（标题留白之外），
   否则裁到墙上的「美甲｜美睫｜美肤」大字会很乱（2026-10-15）。 */
.page-head.jobs-head .bg img { object-position: 30% 88%; transform: scale(1.12); opacity: .5; }
.page-head.jobs-head .bg::after {
  background:
    linear-gradient(90deg, rgba(24,20,16,.94) 0%, rgba(24,20,16,.82) 36%, rgba(24,20,16,.40) 68%, rgba(24,20,16,.24) 100%),
    linear-gradient(180deg, rgba(24,20,16,.34) 0%, rgba(24,20,16,.08) 50%, rgba(24,20,16,.58) 100%);
}
@media (max-width: 900px) {
  .page-head.jobs-head .bg img { object-position: 42% 92%; transform: scale(1.05); }
}
.page-head .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24,20,16,.90) 0%, rgba(24,20,16,.66) 42%, rgba(24,20,16,.28) 78%, rgba(24,20,16,.14) 100%);
}
.page-head .wrap { position: relative; z-index: 2; padding-top: clamp(52px, 6.6vw, 84px); padding-bottom: clamp(46px, 5.6vw, 72px); }
.page-head h1 { color: #fff; max-width: 20em; text-shadow: 0 1px 26px rgba(0,0,0,.4); }
.page-head p { color: #DED4C4; max-width: 42em; margin: 1em 0 0; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.page-head .eyebrow { color: var(--gold-l); }

/* 面包屑：从原来紧贴页头下沿，挪成独立一条白底带，
   顺便给它和页头之间留出呼吸（原来 padding-top 只有 14px，视觉上像粘上去的）。 */
.crumb { font-size: 13px; color: var(--muted); padding: 14px 0; background: var(--cream); border-bottom: 1px solid var(--line2); }
.crumb ol { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.crumb li { margin: 0; }
.crumb li + li::before { content: "／"; color: var(--line); margin-right: 6px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--gold); }
/* 面包屑之后紧跟的section 少一截上内边距，避免「 crumb 条 + 区块头」双重留白 */
.crumb + section { padding-top: clamp(40px, 5vw, 64px); }

/* ---------------------------------------------------------------- 区块 */
section { padding: clamp(48px, 6.5vw, 84px) 0; }
section.tight { padding: clamp(34px, 4vw, 56px) 0; }
.alt { background: var(--white); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.ink { background: var(--ink); color: #EDE6DB; }
.ink h2, .ink h3 { color: #fff; }
.ink .muted, .ink .note { color: #B8AE9E; }
.ink a { color: var(--gold-l); }

/* 卡片与图片统一的悬浮反馈：原来只有 .btn 变色，卡片和图一动不动，
   整页看着很静。给卡片加一点极轻的抬升，够用不晃眼（2026-10-15）。 */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover {
  transform: translateY(-2px);
  border-color: #D8CCB6;
  box-shadow: 0 8px 26px rgba(36,31,26,.07);
}
.quick-card, .trust > div, .tick, .shot, .gallery figure { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.quick-card:hover, .trust > div:hover {
  transform: translateY(-2px); border-color: #D8CCB6;
  box-shadow: 0 8px 26px rgba(36,31,26,.07);
}
@media (prefers-reduced-motion: reduce) {
  .card, .quick-card, .trust > div, .tick, .shot, .gallery figure { transition: none; }
  .card:hover, .quick-card:hover, .trust > div:hover { transform: none; }
}

.sec-head { margin-bottom: clamp(28px, 3.4vw, 44px); max-width: 760px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head p { color: var(--ink2); margin-top: .9em; margin-bottom: 0; }
.ink .sec-head p { color: #C6BCAB; }

.muted { color: var(--muted); }
.note { font-size: 13.5px; color: var(--muted); line-height: 1.85; }
.small { font-size: 14px; }
.lead-2 { font-size: 17.5px; color: var(--ink2); }

/* ---------------------------------------------------------------- 网格 */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.split.rev > :first-child { order: 2; }
/* .split 左栏只占到一半宽，h2 折行时很容易掉一两个字下来（到店页的
   「精品店（大兴龙湖天街店）」就是一例），给它放开行宽上限，
   让标题尽量在完整语义处断行。 */
.split h2 { max-width: none; }
@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--cream2); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
}
.alt .card { background: var(--cream); }
.card .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: #EDE6DB; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb.tall { aspect-ratio: 3 / 4; }
.card .body { padding: 20px 22px 24px; flex: 1; }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .tag { font-size: 12.5px; color: var(--gold); letter-spacing: .16em; display: block; margin-bottom: .7em; }
/* 自绘示意图（技术标准页的 C 弧 / 最高点 / 甲型）。图本身是 inline SVG，
   不引外部文件，也不写 font-family——字随页面走 */
.figure { background: #EDE6DB; border-bottom: 1px solid var(--line); padding: 12px 12px 4px; }
.figure svg { display: block; width: 100%; height: auto; }

/* 四张速览卡：找店最要紧的四件事，单独拎出来先看到。
   招聘页删掉「怎么联系」那张后只剩三张，用 .quick-3 让它排成三栏，
   否则会在四栏网格里空出一格（2026-10-15）。 */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 26px; }
.quick-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .quick, .quick-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .quick, .quick-3 { grid-template-columns: 1fr; gap: 14px; } }
.quick-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 22px 22px;
}
.quick-card h3 { font-size: 18px; margin-bottom: .5em; }
/* 单字图标方块，替代原来只有一条金线的弱分隔 */
.quick-ico {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-size: 15px; letter-spacing: 0;
}
.quick-card p { font-size: 14.5px; color: var(--ink2); line-height: 1.8; margin: 0; }
.quick-card p strong { color: var(--ink); }
.quick-card a strong { color: var(--gold); }
.quick-card a:hover strong { color: var(--ink); }

/* 速览卡下面的附注：原 factcard 的外壳，去掉顶部金边和大内边距，
   只保留那一列 7.5em 的关键词表，让它退到次要位置 */
.factcard { padding: 24px 26px; border-top-width: 1px; margin: 0; }
.factcard dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; gap: 0; }
.factcard dt {
  font-size: 13.5px; color: var(--gold); letter-spacing: .14em;
  padding: 11px 0; border-top: 1px solid var(--line2);
}
.factcard dd {
  margin: 0; padding: 11px 0; border-top: 1px solid var(--line2);
  font-size: 15px; color: var(--ink2); line-height: 1.8;
  /* 全局给p / dd 收过 38em 行宽上限，这里是表格的第二列，不能再限一次，
     否则整张表会往左边挤出一块空白（2026-10-15 改速览卡时发现）。 */
  max-width: none;
}
.factcard dt:first-of-type, .factcard dt:first-of-type + dd { border-top: 0; }

@media (max-width: 620px) {
  .quick-card { padding: 20px 20px 20px; }
  .factcard { padding: 20px 22px; }
}

@media (max-width: 620px) {
  .factcard dl { grid-template-columns: 1fr; }
  .factcard dd { border-top: 0; padding-top: 0; padding-bottom: 14px; }
  .factcard dt { padding-bottom: 2px; }
}

/* 四张信任状 */
.trust { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }
/* 由「一条金线+ 文字」改成带底色卡片，段落之间才分得开 */
.trust > div {
  background: var(--cream2); border: 1px solid var(--line); border-radius: var(--r);
  border-top: 2px solid var(--gold);
  padding: 22px 22px 24px;
}
.trust h3 { font-size: 18px; margin-bottom: .5em; }
.trust p { font-size: 14.5px; color: var(--ink2); margin: 0; line-height: 1.8; }
/* 图标比金色描边圆章更好识别 */
.trust-ico {
  display: block; width: 26px; height: 26px; margin-bottom: 12px; color: var(--gold);
}
.trust-ico svg { width: 100%; height: 100%; display: block; }

/* 问答：套一层浅色面板，顺便把 +/- 与问题之间留出呼吸 */
.faq-panel {
  background: var(--cream2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px clamp(22px, 3vw, 40px);
}

/* FAQ 内页的分组问答（22 个问题分五组）。
   原来是窄栏里一条到底的长卷，现在每组独立成卡：卡片有底色和边框，
   组与组之间分得开，页面不再是上下无限延伸的一列（2026-10-15）。 */
.faq-group {
  background: var(--cream2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 4px clamp(20px, 2.4vw, 34px);
  margin-bottom: 34px;
}
.alt .faq-group { background: var(--cream); }
/* 分组标题（h2）与卡片之间收一点距，并给个金线小标记 */
section h2 { max-width: none; }
.faq-group + h2, h2 + .faq-group { margin-top: 0; }
.faq-group summary { font-size: 17px; padding-top: 17px; padding-bottom: 17px; }
.faq-group .ans { font-size: 15px; }
/* FAQ 内页独有：分组标题给一级视觉——加一条金色短竖线，跟下面那张卡之间
   留一口气。用 .faq-group 作为前置兄弟选择器来限定范围，不影响其它内页
   的 h2 版式（2026-10-15）。 */
.faq-group ~ h2 { margin-top: 52px; position: relative; padding-left: 16px; margin-bottom: 20px; }
.faq-group ~ h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 3px; background: var(--gold); border-radius: 2px;
}
@media (max-width: 620px) {
  .faq-group { padding: 2px 16px; margin-bottom: 24px; }
  .faq-group summary { font-size: 16px; }
  .faq-group ~ h2 { margin-top: 40px; padding-left: 13px; }
}

/* 内页分栏要点块（到店指南的「三种到店方式」、服务页的三项说明等）。
   原来跟信任状一样只靠一条金线撑版式，这里统一改成卡片，和首页风格对齐。 */
.tick {
  background: var(--cream2); border: 1px solid var(--line);
  border-top: 2px solid var(--gold); border-radius: var(--r);
  padding: 24px 24px 26px;
}
.alt .tick { background: var(--cream); }
.ink .tick { border-top-color: var(--gold-l); background: transparent; border-color: #4A443C; border-top-width: 2px; }
.tick h3 { font-size: 18px; margin-bottom: .5em; }
.tick p { font-size: 14.5px; color: var(--ink2); margin: 0; line-height: 1.8; max-width: none; }
.ink .tick p { color: #C6BCAB; }
/* 网格里的 .tick 顶部不再被重复的金线压住，统一交给卡片边框 */
.grid .tick { margin: 0; }

/* 沿革时间线 */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 28px 28px; margin: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: .78em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}
.timeline b {
  display: block; font-weight: 500; font-size: 19px;
  letter-spacing: .08em; color: var(--ink); margin-bottom: .15em;
}
.timeline span { display: block; color: var(--ink2); font-size: 15.5px; line-height: 1.8; }

/* 大字引言 */
.pull {
  font-weight: 500; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.75;
  color: var(--ink); letter-spacing: .04em; margin: 0 0 1.2em;
}
.ink .pull { color: #fff; }

/* ---------------------------------------------------------------- 表格 */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--white); border: 1px solid var(--line);
}
table.tbl caption {
  caption-side: top; text-align: left; font-size: 13.5px; color: var(--muted);
  padding-bottom: 10px;
}
table.tbl th, table.tbl td {
  padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line2);
  vertical-align: top; line-height: 1.7;
}
table.tbl thead th {
  background: var(--cream); font-weight: 500; font-size: 13.5px;
  color: var(--ink2); letter-spacing: .08em; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.tbl tbody tr:nth-child(even) td { background: #FDFBF7; }
table.tbl tr:hover td { background: #F8F2E6; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
/* 手机上不横滑：收紧字号与内边距，表头允许折行，把宽度让给「包含权益」那一列 */
@media (max-width: 620px) {
  table.tbl { font-size: 14px; }
  table.tbl th, table.tbl td { padding: 10px; }
  table.tbl thead th { white-space: normal; }
  table.tbl caption { font-size: 12.5px; }
  table.tbl td.price { font-size: 15px; }
}
table.tbl td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl td.price { white-space: nowrap; color: var(--red); font-size: 16px; }
table.tbl tr:hover td { background: #FDFBF7; }

/* ---------------------------------------------------------------- 图集 */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.gallery .ph { aspect-ratio: 3 / 4; overflow: hidden; background: #EDE6DB; }
.gallery .ph.wide { aspect-ratio: 3 / 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.035); }
.gallery figcaption { font-size: 12.5px; color: var(--muted); padding: 9px 11px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .gallery img, .btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- 问答 */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 0; position: relative;
  font-weight: 500; font-size: 18px; letter-spacing: .03em; color: var(--ink);
  line-height: 1.6;
}
.faq summary::-webkit-details-marker { display: none; }
/* 加号单独占一个 44px 的方框居中，右边多留一点，视觉上不贴着问题文字 */
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 22px; line-height: 1;
  width: 44px; text-align: center;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--gold); }
.faq .ans { padding: 0 56px 24px 0; color: var(--ink2); font-size: 15.5px; max-width: 62em; }
.faq .ans p:last-child { margin-bottom: 0; }
.faq h3 { font-size: 19px; padding: 22px 0 4px; }

/* ---------------------------------------------------------------- 其它块 */
.strip { border-left: 3px solid var(--gold); padding: 4px 0 4px 22px; margin: 0 0 1.4em; }
.strip p:last-child { margin-bottom: 0; }
.strip cite { font-style: normal; font-size: 14px; color: var(--muted); display: block; margin-top: .5em; }

.pillrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.3em; padding: 0; list-style: none; }
.pillrow li {
  margin: 0; font-size: 13px; color: var(--ink2); border: 1px solid var(--line);
  background: var(--white); padding: 5px 13px; border-radius: 999px;
}
.ink .pillrow li { background: transparent; border-color: #4A443C; color: #D8CFC0; }

.updated { font-size: 13px; color: var(--muted); letter-spacing: .06em; margin-top: 10px; }

/* 页尾行动区：原来是一圈金线加米白底，在整页里不够收尾。加深底色 + 提亮按钮，
   让「打电话预约」成为整页视觉上的落点。 */
.cta {
  border: 1px solid var(--gold); padding: clamp(30px, 4vw, 52px);
  background: var(--ink); color: #DED4C4; text-align: center; border-radius: var(--r);
}
.cta h2 { margin-bottom: .5em; color: #fff; }
.cta p { max-width: 40em; margin-left: auto; margin-right: auto; color: #C6BCAB; }
.cta a:not(.btn) { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
.cta .kicker { color: var(--gold-l); }
.cta .updated { color: #8C8375; }
/* 深底上按钮要用浅色描边，否则深字压深底看不见 */
.cta .btn-ink { border-color: var(--gold); color: var(--cream); }
.cta .btn-ink:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* 带金色对勾的要点列表 */
.tick-list { list-style: none; padding: 0; margin: 0 0 1.6em; }
.tick-list li { position: relative; padding-left: 26px; margin-bottom: .55em; }
/* 对勾原来写在 ::before 里 top:.62em，遇到折成两行的长句就对不齐了。
   改成 flex 布局：勾与文字顶对齐，纵向居中按整行高度算（2026-10-15）。 */
.tick-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding-left: 0; line-height: 1.8;
}
.tick-list li::before {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 5px; margin-top: .78em;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { margin: 0; border-bottom: 1px solid var(--line2); }
.linklist a { display: block; padding: 14px 30px 14px 0; position: relative; font-size: 16px; }
.linklist a::after { content: "→"; position: absolute; right: 6px; color: var(--gold); }
.linklist a:hover { padding-left: 6px; }

/* ---------------------------------------------------------------- 页脚 */
.site-foot { background: var(--ink); color: #B8AE9E; margin-top: 0; padding: 56px 0 34px; font-size: 14.5px; }
/* 顶部加一道极窄的金线，和页尾行动区呼应，页面收口才干净 */
.site-foot { border-top: 2px solid var(--gold); }
.site-foot h3 { color: #fff; font-size: 17px; margin-bottom: .8em; }
.site-foot a { color: #D8CFC0; }
.site-foot a:hover { color: var(--gold-l); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-foot .nap { line-height: 2; max-width: none; }
.site-foot .nap b { color: #fff; font-weight: 500; }
.site-foot .colophon {
  border-top: 1px solid #3A342C; margin-top: 36px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #8C8375;
}
.foot-logo { height: 34px; width: auto; margin-bottom: 16px; }

/* 页脚的企业微信二维码（2026-10-15 加，全站每页都有）。
   放在地址块下方，顾客在任意页都能扫。深色底上要垫白底，
   否则二维码的黑白格跟墨色背景糊在一起扫不出来。 */
.foot-qr { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.foot-qr img {
  width: 92px; height: 92px; flex: 0 0 auto;
  background: #fff; padding: 6px; border-radius: 4px;
}
.foot-qr-txt { display: flex; flex-direction: column; gap: 3px; }
.foot-qr-k { font-size: 12px; color: var(--gold-l); letter-spacing: .16em; }
.foot-qr-n { font-size: 12.5px; color: #A79D8D; line-height: 1.65; }
@media (max-width: 620px) {
  .foot-qr img { width: 84px; height: 84px; }
}

/* ---------------------------------------------------------------- 移动端排版
   小屏不做「等比例缩小」，而是单独调一档：标题略收、正文行高略紧、左右留白略窄，
   这样一屏能多放下两三行字，标题也不会动不动占掉半屏。放在文件最后，确保覆盖上面的基准值。 */
@media (max-width: 620px) {
  body { font-size: 16px; line-height: 1.8; }
  /* 手机上文字铺满整屏，所以整块遮罩改成竖向的：
     顶部深（标题压得住）、向下渐淡（底部的照片还能看见一点，不至于全黑）。 */
  .hero-media::after { background: linear-gradient(180deg, rgba(24,20,16,.92) 0%, rgba(24,20,16,.82) 55%, rgba(24,20,16,.64) 100%); }
  .hero-body { padding: 52px 0 44px; }
  /* 桌面那条 15em 的标题宽度上限在手机上反而把「· 新中式精品店」挤出了屏幕，
     这里解除，让它回到满宽（2026-10-15）。 */
  .hero-body h1 { max-width: none; }
  /* 手机上字距放大到 .10em 后标题更宽，收到 .06em 才不会顶出屏幕。 */
  .hero-body h1 { letter-spacing: .02em; }
  /* 首页大标题要刚好排成两行：「三月初九美甲 · 新中式精品店」/「（北京大兴龙湖天街店）」。
     黑体 25px 正好；换成宋体会略宽（会多挤出一行），换字体时要连这里一起核。 */
  h1 { font-size: 25px; }
  h2 { font-size: 23px; }
  .wrap { padding: 0 20px; }
  .head-inner { padding-left: 18px; padding-right: 18px; }
  /* 手机上段落满宽就是最舒服的行宽，不再限制 */
  p, ul:not([class]), ol:not([class]) { max-width: none; }
  .page-head p, .hero-body .lede { max-width: none; }
  /* 导航加到 8 项（含「技术标准」）后，390px 上第四项会被挤到第三行；
     收紧内边距与字号让它回到两行。必须写在这里：媒体查询不增加优先级，
     写在文件前面会被后面的 .nav a 基准值盖掉（2026-10-15 踩过）。 */
  .nav { margin-left: 0; }
  /* 8 个导航项在手机上硬换行要占三行、吃掉小半屏首屏。改成单行横向可滑动：
     一屏只看得到前几项，右边还能滑，比折行更省高度，也不会挤爆标题。 */
  .nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100%; scrollbar-width: none;
    /* 让首行/末行项的左右 padding 在滑动到头时不被裁掉 */
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 10px; font-size: 14px; flex: 0 0 auto; }
  /* 四列以上的表在手机上按列压扁会挤成「考／什／么」这种一字一行；
     带 .tbl-stack 的表改成一张一张卡片：表头收起来，每格前面用 data-label 标出是哪个级别。
     选择器必须是 table.tbl-stack 这种写法，才压得过上面的 table.tbl td 基准样式。 */
  table.tbl-stack { min-width: 0; }
  table.tbl-stack caption { display: block; width: auto; text-align: left; }
  table.tbl-stack thead { display: none; }
  table.tbl-stack, table.tbl-stack tbody, table.tbl-stack tr, table.tbl-stack td { display: block; width: 100%; }
  table.tbl-stack tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  table.tbl-stack td { border: none; padding: 3px 0; }
  table.tbl-stack td:first-child { font-weight: 600; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
  table.tbl-stack td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; letter-spacing: .06em; margin-right: 6px; }
}

/* ==========================================================================
   人才招聘页（2026-10-15 新增）
   四个岗位各一张 job 卡：卡头是岗位名 + 薪资，卡身左右两栏
   （做什么 / 我们看重），底部是投递方式。不依赖 JavaScript。
   ========================================================================== */
.job {
  background: var(--cream2); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 26px; overflow: hidden;
}
.alt .job { background: var(--white); }
/* 卡头：深墨底，与卡身分开，岗位名一眼能扫到 */
.job-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--ink); color: #EDE6DB;
  padding: 22px clamp(20px, 2.4vw, 32px);
}
.job-head h3 { color: #fff; font-size: 23px; margin: 0; }
.job-meta { font-size: 13px; color: #B8AE9E; letter-spacing: .05em; margin: 6px 0 0; max-width: none; }
/* 薪资用金色，扫一眼就知道大概区间 */
.job-salary {
  font-size: 14.5px; color: var(--gold-l); letter-spacing: .04em;
  border: 1px solid #4A443C; border-radius: 999px; padding: 7px 18px;
  white-space: nowrap; background: transparent;
}
.job-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 38px); padding: clamp(22px, 2.6vw, 32px); }
@media (max-width: 760px) { .job-body { grid-template-columns: 1fr; } }
.job-col h4 {
  font-size: 14px; color: var(--gold); letter-spacing: .16em;
  margin: 0 0 .9em; padding-bottom: 8px; border-bottom: 1px solid var(--line2);
}
.job-col ul { margin: 0; padding-left: 1.15em; font-size: 14.5px; color: var(--ink2); line-height: 1.8; }
.job-col ul li { margin-bottom: .55em; }
.job-col .tick-list { padding-left: 0; margin-bottom: 1.2em; }
.nowrap { white-space: nowrap; }

/* 投递方式：CTA 里的三张联系卡（微信 / 电话 / 到店） */
.job-contact {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 30px; text-align: left;
}
/* 招聘页删掉微信卡后只剩两张，用 .job-contact-2 排成两栏（2026-10-15） */
.job-contact-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .job-contact, .job-contact-2 { grid-template-columns: 1fr; gap: 12px; } }
/* 加入企业微信二维码后回到三栏 */
.job-contact-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .job-contact-3 { grid-template-columns: 1fr; } }
/* 二维码：白底衬一块，深色卡上才有对比度；尺寸限住，别撑破卡片 */
.job-contact-card .qr { margin: 10px 0 0; text-align: center; }
.job-contact-card .qr img {
  width: 132px; height: 132px; margin: 0 auto;
  background: #fff; padding: 7px; border-radius: 4px;
  border: 1px solid #4A443C;
}
.job-contact-card .qr figcaption {
  font-size: 12px; color: #A79D8D; margin-top: 8px; line-height: 1.5;
}
.job-contact-card {
  border: 1px solid #4A443C; border-radius: var(--r);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,.03);
}
.job-contact-k { font-size: 12px; color: var(--gold-l); letter-spacing: .22em; }
.job-contact-card strong { font-size: 17px; color: #fff; font-weight: 500; }
.job-contact-card strong a { color: #fff; }
.job-contact-card strong a:hover { color: var(--gold-l); }
.job-contact-n { font-size: 12.5px; color: #A79D8D; line-height: 1.6; }

/* ==========================================================================
   技术标准页：实拍对照图（2026-10-15 新增）
   图片是老板用 AI 生成的实拍图解（源：门店《技术考核要求》第 5–9 页），
   已压到 900×675 / 单张 20–46KB。标注文字用 HTML 写，方便搜，也方便改。
   ========================================================================== */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
.shot {
  margin: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.shot > img, .shot > .figure, .shot .shot-anatomy img { display: block; width: 100%; height: auto; background: #EDE6DB; border-bottom: 1px solid var(--line); }
.shot .figure { padding: 10px 10px 0; }
.shot .figure svg { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 15px 17px 17px; font-size: 14.5px; line-height: 1.78; color: var(--ink2); }
.shot figcaption b { display: inline-block; color: var(--gold); font-weight: 600; margin-right: .4em; }
.shot figcaption .sub { color: var(--muted); }
.shot figcaption .ok { color: var(--green); font-weight: 600; }
.shot figcaption .no { color: var(--red); font-weight: 600; }

/* ① 指甲各部位：图上的四个标注（位置按 900×675 的原图量的，换图要重新对） */
.shot-anatomy { position: relative; }
.shot-anatomy span {
  position: absolute; left: 63%; font-size: 12.5px; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
}
.shot-anatomy span::before {
  content: ""; display: inline-block; width: 15px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-right: 7px; opacity: .75;
}

@media (max-width: 620px) {
  .shots { grid-template-columns: 1fr; gap: 20px; }
  .shot-anatomy span { font-size: 11.5px; }
  .shot-anatomy span::before { width: 10px; margin-right: 5px; }
}