/* ══════════════════════════════════════════════════════════════
   设计参数（从原型实测提取，改视觉优先改这里）
   ══════════════════════════════════════════════════════════════ */
:root {
  /* 颜色 */
  --paper: #f5f4ef;          /* 纸色：页面底 */
  --paper-studio: #fafaf8;   /* Studio 页单独用的更白的纸色 */
  --ink: #20211d;            /* 墨色：正文 */
  --stage: #8d9081;          /* 外层底色：Menu 总览时露出来的灰绿 */
  --muted: #66695e;          /* 次要文字（View 01 等） */
  --muted-2: #75776d;        /* 中文小字 */
  --line: #bfc0bc;           /* 细分隔线 */
  --img-empty: #e4e4e2;      /* 图片未加载 / 空位 */
  --cell-empty: #dededb;     /* 详情页空格子 */
  --slot-empty: #d2d2d2;     /* 服务页图片占位 */
  --edit-hover: #2b6cf0;     /* 后台预览点选时的描边（preview.css），要在照片和纸色上都看得清 */

  /* 字体 */
  --font: Arial, 'Microsoft YaHei', sans-serif;

  /* 缓动曲线 */
  --ease-room: cubic-bezier(.76, 0, .24, 1);   /* 页面整屏横移，0.8s */
  --ease-out: cubic-bezier(.22, .68, .16, 1);  /* 详情页进出场 0.86s / 导航文字 */
  --ease-soft: cubic-bezier(.46, 0, .09, 1);   /* 开场动画 / 总览卡片 */

  /* 时长 */
  --dur-room: .8s;
  --dur-strip: .7s;

  /* 布局 */
  --gutter: 16px;
  --header-h: 72px;

  /* 后台"设计参数"的缩放系数（表在 admin/js/design-spec.js）：1 = 原样。后台改过的项由 js/design.js 写在 <html> 上，盖过这里。
     乘在哪：导航两项就乘在下面这一段；其余乘在各自的 CSS 里（overview.css、studio.css、service.css、page.css，搜 --scale-） */
  --scale-nav-size: 1;        /* 导航字号 */
  --scale-nav-gap: 1;         /* 导航间距 */
  --scale-overview-title: 1;  /* Menu 总览卡片标题字号 */
  --scale-studio-title: 1;    /* Studio 大标题字号 */
  --scale-service-title: 1;   /* 服务页大标题字号 */
  --scale-section-space: 1;   /* Studio 各段、服务页各章节的上下留白 */
  --scale-tpl-title: 1;       /* 新模板页的页面大标题字号 */
  --scale-tpl-body: 1;        /* 新模板页的区块正文字号 */

  /* 页眉导航条（header.css）：设计师调外观只改这一段。
     字号、间距乘后台的缩放系数；放大时另有随屏宽的上限 min(原值 × 系数, max(原值, N vw))：
     默认 18px / 2.2rem 的导航条在 1024px 宽时正好放满（更窄的桌面屏本来就放不下），1.75vw、3.4vw 就是 1024px 时的原值，
     所以放大只在更宽的屏幕上生效，不会把导航条挤到折行或压住 Contact；调小、默认值都不受上限影响。
     手机展开列表同理：8.3vw 是 360px 宽时的 30px，最长的一项（Packaging design）刚好一行 */
  --nav-font-size: min(calc(18px * var(--scale-nav-size)), max(18px, 1.75vw));         /* 中间导航项的字号 */
  --nav-gap: min(calc(2.2rem * var(--scale-nav-gap)), max(2.2rem, 3.4vw));             /* 导航项之间的间距 */
  --nav-contact-font-size: var(--nav-font-size);                                       /* 右侧 Contact 的字号 */
  --nav-current-line: 1px;                                                             /* 当前页下划线的粗细 */
  --nav-drawer-font-size: min(calc(30px * var(--scale-nav-size)), max(30px, 8.3vw));   /* 窄屏全屏列表的字号 */
  --nav-drawer-gap: calc(1.1rem * var(--scale-nav-gap));                               /* 窄屏全屏列表的行距 */

  /* 模板页（page.css）：设计师调外观只改这一段。后台存的是档位（s / m / l 等），每档对应这里的一个值，改了全站模板页一起变 */
  --tpl-title-size: clamp(44px, 5vw, 96px);      /* 页面大标题 */
  --tpl-title-space: clamp(48px, 12vh, 140px);   /* 页面大标题上方的留白 */
  --tpl-col-gap: 16px;                           /* 12 列网格的列间距（并排区块之间） */
  --tpl-heading-s: clamp(20px, 1.6vw, 28px);     /* 区块标题字号：小 / 中 / 大（titleSize，手机也认） */
  --tpl-heading-m: clamp(26px, 2.6vw, 48px);
  --tpl-heading-l: clamp(36px, 4.2vw, 80px);
  --tpl-body-size: clamp(15px, 1.15vw, 20px);    /* 正文字号 */
  --tpl-body-measure: 42em;                      /* 正文一行最长多少（太长读着累） */
  --tpl-space-s: clamp(10px, 1.2vw, 20px);       /* 区块上 / 下留白：小 / 中 / 大（spaceTop / spaceBottom，手机也认） */
  --tpl-space-m: clamp(24px, 3vw, 48px);
  --tpl-space-l: clamp(48px, 7vw, 120px);
  --tpl-image-s: 50%;                            /* 图片区块：图占区块宽度，小 / 中 / 大（imageSize，只在桌面） */
  --tpl-image-m: 75%;
  --tpl-image-l: 100%;
  --tpl-split-s: 33.333%;                        /* 图文区块：图占区块宽度，小 / 中 / 大（imageSize，只在桌面） */
  --tpl-split-m: 50%;
  --tpl-split-l: 66.667%;
  --tpl-gallery-gap: 16px;                       /* 图集格子间距 */
  --tpl-gallery-ratio: 4 / 5;                    /* 图集格子的宽高比（按裁切焦点裁） */
  --tpl-caption-size: 11px;                      /* 图注字号 */
}

@media (max-width: 650px) {
  :root { --header-h: 80px; }
}