/* ============================================================
   服饰电商素材工作流 — 视觉系统 tokens
   Lookbook / 订货会画册 语法:暖白纸底 · 大图为主 · hairline 描边 · 零投影
   来源:L'ALPINA 款式风格版 与 品牌故事版面(色卡取自 Pantone TCX 实样)
   这一层可直接复用于网页版与对外文档,不依赖任何页面内联样式。
   ============================================================ */

:root {
  /* ---------- 色板(语义命名) ---------- */
  /* 纸底:骨白暖调,不用纯白 */
  --paper:            #F4F1EA;  /* 页面底色 骨白 */
  --paper-sunk:       #EAE6DB;  /* 下沉区:段落交替底、图底 */
  --paper-raised:     #FBF9F4;  /* 上浮区:卡片、陈列格 */

  /* 墨色:文字与深块 */
  --ink:              #17161A;  /* 正文与标题 近黑 */
  --ink-muted:        #55525A;  /* 次级说明 */
  --ink-faint:        #8C8A90;  /* 三级/标注/编号 */
  --ink-deep:         #0F0E11;  /* 海报级深块 */

  /* 强调:一支锐利的朱红,面积小 */
  --flame:            #D93A1E;  /* 主强调色 */
  --flame-deep:       #A32A13;  /* 正文级强调文字 */
  --indigo:           #17161A;  /* 深强调块(沿用变量名) */
  --indigo-soft:      #2A2830;
  --chai:             #D93A1E;  /* 节点标签 */
  --lichen:           #5A6152;
  --coffee:           #3A2A21;

  /* 反色文字(深块之上) */
  --on-deep:          #F4F1EA;
  --on-deep-muted:    #9C99A2;

  /* 描边:全系统只有 hairline,零投影 */
  --hairline:         rgba(23, 22, 26, 0.16);
  --hairline-strong:  rgba(23, 22, 26, 0.34);
  --hairline-faint:   rgba(23, 22, 26, 0.08);
  --hairline-on-deep: rgba(244, 241, 234, 0.24);

  /* ---------- 字体 ----------
     全部自托管,不引用任何境外 CDN(承 deploy-safety.md § China Mainland self-host 铁律)。
     @font-face 实体在本文件末尾的 @@FONTFACE 区间,由 scripts/build_intro_fonts.sh 生成。
     stack 里的系统字体只是兜底,不是唯一来源。 */
  --font-cn:      "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-label:   "Outfit", "Noto Sans SC", "PingFang SC", sans-serif;   /* 英文 eyebrow / 标签 */
  --font-mono:    "Geist Mono", "SFMono-Regular", "DejaVu Sans Mono", monospace; /* 编号 / 技术标签 */
  --font-quote:   "Cormorant", Georgia, serif;                            /* 极少量英文点题 */

  --w-body:   400;
  --w-mid:    500;
  --w-title:  700;   /* 中文标题定为 Noto Sans SC 700(工业气质,与交付物同源) */

  /* ---------- 字号阶梯(1.25 基准,中文正文偏小、行距舒朗) ---------- */
  --fs-100: 11px;   /* 编号 / TCX 码 */
  --fs-200: 12px;   /* eyebrow / 标签 */
  --fs-300: 13px;   /* 图注 */
  --fs-400: 15px;   /* 正文小 */
  --fs-500: 17px;   /* 正文 */
  --fs-600: 20px;   /* 小标题 */
  --fs-700: 26px;   /* 段标题 */
  --fs-800: 34px;   /* 章标题 */
  --fs-900: 46px;   /* 首屏副级 */
  --fs-1000: 62px;  /* 首屏主标题 */
  --fs-anchor: 84px;/* 大数字视觉锚点 */

  --lh-tight: 1.18;
  --lh-title: 1.32;
  --lh-body:  1.95;   /* 中文正文舒朗行距 */
  --ls-label: 0.16em; /* 英文标签字距 */
  --ls-title: 0.01em;

  /* ---------- 间距标尺(4 基准) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 176px;

  /* ---------- 圆角规格 ---------- */
  --r-0: 0px;    /* 分隔、通栏、深块 */
  --r-1: 2px;    /* 卡片、陈列格、描边容器 */
  --r-2: 4px;    /* 色卡、标签片 */
  --r-pill: 999px;

  /* ---------- 版面 ---------- */
  --page-max: 1320px;
  --gutter: 64px;
  --shadow-none: none;  /* 本系统不使用投影 */
}

/* @@FONTFACE-START — 由 scripts/build_intro_fonts.sh 生成,勿手改 */
/* 全部 self-host,零境外 CDN。字体源与子集命令见 scripts/build_intro_fonts.sh。 */
/* —— 先声明 full(全站字符 · swap) —— */
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
/* —— 后声明 critical(首屏字符 · block · preload) —— */
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-400-critical.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0020-007E,U+00B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2190-2194,U+21D2,U+25A0-25A1,U+25C6,U+25CB,U+25CF,U+2605-2606,U+2713,U+2717,U+3001-3002,U+3008-3011,U+4E00,U+4E0A-4E0B,U+4E0D-4E0E,U+4E2A,U+4E2D,U+4E32,U+4E3B,U+4E48,U+4E4B,U+4E8B,U+4E94,U+4E9B,U+4EA4,U+4EA7,U+4ECE,U+4ED8,U+4EEC,U+4F01,U+4F5C,U+4F60,U+4F8B,U+4FA7,U+503C,U+505A,U+5148,U+516D,U+5170,U+518D,U+51E0,U+51FA,U+5212,U+5217,U+521A-521B,U+5230,U+524D,U+526A,U+5356,U+5361,U+53CC,U+53D8,U+53E0,U+53F0,U+53F3,U+5404,U+540D-540E,U+5411,U+548C,U+54C1,U+5546,U+56DB,U+56F4,U+56FE,U+5728,U+5730,U+573A,U+578B,U+5851,U+58F0,U+5927,U+5934,U+5B50,U+5B57-5B58,U+5B63,U+5B83,U+5B8C,U+5B9A,U+5BF8,U+5C01,U+5C0F,U+5C31,U+5C3A,U+5C55,U+5DE5-5DE6,U+5E73-5E74,U+5E93,U+5E97,U+5F0F,U+5F20,U+5F55,U+5F62,U+5F71,U+5F80,U+5F97,U+5FF5,U+600E,U+60C5,U+6210-6211,U+624B,U+624D,U+6253,U+6269,U+626C,U+62CD,U+62FC,U+6392,U+63A5,U+6444,U+6536,U+653E,U+6545,U+6587,U+65B0,U+65B9,U+65E7,U+662F,U+666F,U+670D,U+671F,U+6750,U+6765,U+6784,U+67B6,U+6807,U+6837,U+683C,U+6848,U+695A,U+6982,U+6A21,U+6B21,U+6B3E,U+6B63,U+6BB5,U+6BCF,U+6C1B,U+6D41,U+6DF1,U+6E05,U+6E20,U+70B9,U+7167,U+7247-7248,U+724C,U+7279,U+7403,U+751F,U+7528,U+7535,U+753B,U+7684,U+76F4,U+7701,U+770B,U+77E5,U+786E,U+79CD,U+7A0B,U+7AD6,U+7B49,U+7C3F,U+7C73,U+7C7B,U+7CFB,U+7D20,U+7EBF,U+7EC7,U+7ED3,U+7ED8-7ED9,U+7F72,U+8054,U+80F6,U+80FD,U+8272,U+827A,U+82B1,U+8349,U+8425,U+843D,U+84DD,U+884C,U+8857,U+8868,U+88C5,U+8981,U+89C6,U+89C9,U+89D2,U+8BA4,U+8BB0,U+8BD5,U+8BE6,U+8C61,U+8D34,U+8D70,U+8FB9,U+8FD8-8FD9,U+904D,U+9053,U+90FD,U+914D,U+94B1,U+94F8,U+94FA,U+9500,U+9519,U+957F,U+95F4,U+968F,U+975B,U+9762,U+978B,U+9875,U+9897-9898,U+98CE,U+9970,U+9996,U+9A8C,U+9B42,U+9F50,U+FF01,U+FF08-FF09,U+FF0C-FF0D,U+FF1A-FF1B,U+FF1F,U+FF5E,U+FFE5;}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-500-critical.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block;unicode-range:U+0020-007E,U+00B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2190-2194,U+21D2,U+25A0-25A1,U+25C6,U+25CB,U+25CF,U+2605-2606,U+2713,U+2717,U+3001-3002,U+3008-3011,U+4E00,U+4E0A-4E0B,U+4E0D-4E0E,U+4E2A,U+4E2D,U+4E32,U+4E3B,U+4E48,U+4E4B,U+4E8B,U+4E94,U+4E9B,U+4EA4,U+4EA7,U+4ECE,U+4ED8,U+4EEC,U+4F01,U+4F5C,U+4F60,U+4F8B,U+4FA7,U+503C,U+505A,U+5148,U+516D,U+5170,U+518D,U+51E0,U+51FA,U+5212,U+5217,U+521A-521B,U+5230,U+524D,U+526A,U+5356,U+5361,U+53CC,U+53D8,U+53E0,U+53F0,U+53F3,U+5404,U+540D-540E,U+5411,U+548C,U+54C1,U+5546,U+56DB,U+56F4,U+56FE,U+5728,U+5730,U+573A,U+578B,U+5851,U+58F0,U+5927,U+5934,U+5B50,U+5B57-5B58,U+5B63,U+5B83,U+5B8C,U+5B9A,U+5BF8,U+5C01,U+5C0F,U+5C31,U+5C3A,U+5C55,U+5DE5-5DE6,U+5E73-5E74,U+5E93,U+5E97,U+5F0F,U+5F20,U+5F55,U+5F62,U+5F71,U+5F80,U+5F97,U+5FF5,U+600E,U+60C5,U+6210-6211,U+624B,U+624D,U+6253,U+6269,U+626C,U+62CD,U+62FC,U+6392,U+63A5,U+6444,U+6536,U+653E,U+6545,U+6587,U+65B0,U+65B9,U+65E7,U+662F,U+666F,U+670D,U+671F,U+6750,U+6765,U+6784,U+67B6,U+6807,U+6837,U+683C,U+6848,U+695A,U+6982,U+6A21,U+6B21,U+6B3E,U+6B63,U+6BB5,U+6BCF,U+6C1B,U+6D41,U+6DF1,U+6E05,U+6E20,U+70B9,U+7167,U+7247-7248,U+724C,U+7279,U+7403,U+751F,U+7528,U+7535,U+753B,U+7684,U+76F4,U+7701,U+770B,U+77E5,U+786E,U+79CD,U+7A0B,U+7AD6,U+7B49,U+7C3F,U+7C73,U+7C7B,U+7CFB,U+7D20,U+7EBF,U+7EC7,U+7ED3,U+7ED8-7ED9,U+7F72,U+8054,U+80F6,U+80FD,U+8272,U+827A,U+82B1,U+8349,U+8425,U+843D,U+84DD,U+884C,U+8857,U+8868,U+88C5,U+8981,U+89C6,U+89C9,U+89D2,U+8BA4,U+8BB0,U+8BD5,U+8BE6,U+8C61,U+8D34,U+8D70,U+8FB9,U+8FD8-8FD9,U+904D,U+9053,U+90FD,U+914D,U+94B1,U+94F8,U+94FA,U+9500,U+9519,U+957F,U+95F4,U+968F,U+975B,U+9762,U+978B,U+9875,U+9897-9898,U+98CE,U+9970,U+9996,U+9A8C,U+9B42,U+9F50,U+FF01,U+FF08-FF09,U+FF0C-FF0D,U+FF1A-FF1B,U+FF1F,U+FF5E,U+FFE5;}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-700-critical.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0020-007E,U+00B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2190-2194,U+21D2,U+25A0-25A1,U+25C6,U+25CB,U+25CF,U+2605-2606,U+2713,U+2717,U+3001-3002,U+3008-3011,U+4E00,U+4E0A-4E0B,U+4E0D-4E0E,U+4E2A,U+4E2D,U+4E32,U+4E3B,U+4E48,U+4E4B,U+4E8B,U+4E94,U+4E9B,U+4EA4,U+4EA7,U+4ECE,U+4ED8,U+4EEC,U+4F01,U+4F5C,U+4F60,U+4F8B,U+4FA7,U+503C,U+505A,U+5148,U+516D,U+5170,U+518D,U+51E0,U+51FA,U+5212,U+5217,U+521A-521B,U+5230,U+524D,U+526A,U+5356,U+5361,U+53CC,U+53D8,U+53E0,U+53F0,U+53F3,U+5404,U+540D-540E,U+5411,U+548C,U+54C1,U+5546,U+56DB,U+56F4,U+56FE,U+5728,U+5730,U+573A,U+578B,U+5851,U+58F0,U+5927,U+5934,U+5B50,U+5B57-5B58,U+5B63,U+5B83,U+5B8C,U+5B9A,U+5BF8,U+5C01,U+5C0F,U+5C31,U+5C3A,U+5C55,U+5DE5-5DE6,U+5E73-5E74,U+5E93,U+5E97,U+5F0F,U+5F20,U+5F55,U+5F62,U+5F71,U+5F80,U+5F97,U+5FF5,U+600E,U+60C5,U+6210-6211,U+624B,U+624D,U+6253,U+6269,U+626C,U+62CD,U+62FC,U+6392,U+63A5,U+6444,U+6536,U+653E,U+6545,U+6587,U+65B0,U+65B9,U+65E7,U+662F,U+666F,U+670D,U+671F,U+6750,U+6765,U+6784,U+67B6,U+6807,U+6837,U+683C,U+6848,U+695A,U+6982,U+6A21,U+6B21,U+6B3E,U+6B63,U+6BB5,U+6BCF,U+6C1B,U+6D41,U+6DF1,U+6E05,U+6E20,U+70B9,U+7167,U+7247-7248,U+724C,U+7279,U+7403,U+751F,U+7528,U+7535,U+753B,U+7684,U+76F4,U+7701,U+770B,U+77E5,U+786E,U+79CD,U+7A0B,U+7AD6,U+7B49,U+7C3F,U+7C73,U+7C7B,U+7CFB,U+7D20,U+7EBF,U+7EC7,U+7ED3,U+7ED8-7ED9,U+7F72,U+8054,U+80F6,U+80FD,U+8272,U+827A,U+82B1,U+8349,U+8425,U+843D,U+84DD,U+884C,U+8857,U+8868,U+88C5,U+8981,U+89C6,U+89C9,U+89D2,U+8BA4,U+8BB0,U+8BD5,U+8BE6,U+8C61,U+8D34,U+8D70,U+8FB9,U+8FD8-8FD9,U+904D,U+9053,U+90FD,U+914D,U+94B1,U+94F8,U+94FA,U+9500,U+9519,U+957F,U+95F4,U+968F,U+975B,U+9762,U+978B,U+9875,U+9897-9898,U+98CE,U+9970,U+9996,U+9A8C,U+9B42,U+9F50,U+FF01,U+FF08-FF09,U+FF0C-FF0D,U+FF1A-FF1B,U+FF1F,U+FF5E,U+FFE5;}
/* @@FONTFACE-END */

/* ============================================================
   基础
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-cn);
  font-weight: var(--w-body);
  font-size: var(--fs-500);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-cn); font-weight: var(--w-title); }
button, input, textarea, select, .btn, .btn-x, .btn-ghost-x, .card-title, .card-body, .card-kicker, .tag { font-family: var(--font-cn); }
img { display: block; max-width: 100%; }
a { color: var(--flame-deep); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
a:hover { color: var(--flame); border-bottom-color: var(--flame); }
::selection { background: rgba(217, 58, 30, 0.16); }
:focus-visible { outline: 1px solid var(--flame); outline-offset: 3px; }

/* ============================================================
   版面工具
   ============================================================ */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.bleed { width: 100%; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
.g6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.pair { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: var(--sp-7); align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: start; }
.scroll-x { overflow-x: auto; }
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.gal > figure, .g2 > *, .g3 > *, .pair > *, .split > *, .compare > * { min-width: 0; }

/* ============================================================
   组件规格
   ============================================================ */
/* eyebrow 标签 */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-200);
  font-weight: var(--w-mid);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
/* 编号 / 技术标签 */
.num { font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em; color: var(--ink-faint); }
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 3px 8px;
  background: var(--paper-raised);
  white-space: nowrap;
}
/* 卡片:极细描边,零投影 */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  padding: var(--sp-5);
  box-shadow: var(--shadow-none);
}
.card-deep {
  background: var(--indigo);
  color: var(--on-deep);
  border: 0;
  border-radius: var(--r-0);
  padding: var(--sp-6);
}
/* 按钮 */
.btn-x {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-cn); font-size: var(--fs-400); font-weight: var(--w-mid);
  padding: 12px 22px; border-radius: var(--r-1); border: 1px solid var(--ink-deep);
  background: var(--ink-deep); color: var(--on-deep); text-decoration: none;
}
.btn-x:hover { background: var(--indigo); border-color: var(--indigo); color: var(--on-deep); }
.btn-ghost-x {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-400); padding: 12px 22px; border-radius: var(--r-1);
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink); text-decoration: none;
}
.btn-ghost-x:hover { border-color: var(--indigo); color: var(--indigo); }
/* 图注 */
.cap { font-size: var(--fs-300); color: var(--ink-faint); line-height: 1.6; margin: var(--sp-3) 0 0; }
/* 图文对照块 */
.compare { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: var(--sp-6); align-items: stretch; }
/* 流程节点 */
.node-dot { width: 9px; height: 9px; background: var(--indigo); border-radius: var(--r-pill); }
.node-dot.hollow { background: var(--paper); border: 1px solid var(--hairline-strong); }

/* ============================================================
   动效:滚动进入 + 图片揭幕 + 序列错位
   ============================================================ */
.js .fade { opacity: 0; transform: translateY(18px); }
.js .fade.in { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }

/* 图片自下往上揭开 */
.js .fade figure > div { clip-path: inset(0 0 100% 0); }
.js .fade.in figure > div { clip-path: inset(0 0 0 0); transition: clip-path 1000ms cubic-bezier(.16,.84,.24,1) 80ms; }

/* 成组图位错位进场 */
.js .fade.in .gal > figure:nth-child(2), .js .fade.in .g3 > figure:nth-child(2), .js .fade.in .g2 > figure:nth-child(2) { transition-delay: 120ms; }
.js .fade.in .gal > figure:nth-child(3), .js .fade.in .g3 > figure:nth-child(3) { transition-delay: 220ms; }
.js .fade.in .gal > figure:nth-child(4) { transition-delay: 320ms; }
.js .fade.in .gal > figure:nth-child(5) { transition-delay: 400ms; }
.js .fade.in .gal > figure:nth-child(6) { transition-delay: 470ms; }
.js .fade.in .gal > figure:nth-child(7) { transition-delay: 530ms; }
.js .fade.in .gal > figure:nth-child(8) { transition-delay: 580ms; }

/* 图片悬停:缓慢推近 */
figure > div { overflow: hidden; }
figure img { transition: transform 900ms cubic-bezier(.16,.84,.24,1); }
figure:hover img { transform: scale(1.035); }
figure figcaption { transition: color 300ms; }
figure:hover figcaption { color: var(--ink); }

/* 卡片描边在悬停时提亮 */
.card { transition: border-color 320ms, background 320ms; }
.card:hover { border-color: var(--hairline-strong); background: var(--paper); }

/* 走马灯字条 */
.ticker { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ticker-track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track > span {
  display: inline-flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) 0;
  font-family: var(--font-label); font-size: var(--fs-200);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; transform: none; }
  .js .fade figure > div, .js .fade.in figure > div { clip-path: none; }
  .ticker-track { animation: none; }
  figure:hover img { transform: none; }
}

/* ============================================================
   手机竖屏 390
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --fs-1000: 34px; --fs-900: 27px; --fs-800: 23px; --fs-700: 20px; --fs-600: 17px;
    --fs-500: 15px; --fs-400: 14px;
    --fs-anchor: 54px;
    --sp-11: 72px; --sp-10: 64px; --sp-9: 48px; --sp-8: 36px;
  }
  .g2, .g3, .pair, .split, .compare { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body { line-height: 1.85; }
}