/* ==========================================================
   bodamiaomu.com — 瑞士国际主义 × 网格秩序
   12 列显性网格 / 无衬线齐头 / 字号 2 倍递降 / 黑白灰 + 一色点缀
   本套设计不加圆角、不加阴影、不加渐变，加任何一处都会破坏秩序。
   ========================================================== */
:root{
  --ink:#111111;
  --body:#3a3a3a;
  --mute:#8a8a8a;
  --faint:#b5b5b5;
  --line:#dcdcdc;
  --line2:#ededed;
  --bg:#ffffff;
  --blk:#f4f4f2;
  --dark:#111111;
  --red:#d8232a;
  --gut:20px;
  --max:1280px;
  --pad:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--body);
  font-size:16px;line-height:1.75;
  text-align:left;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
em{font-style:normal;color:var(--ink);font-weight:700}
ul{list-style:none}

/* ---------- 12 列网格 ---------- */
.gwrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}

/* 小标签：11px / 字距 .3em / 大写 */
.gkick{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.gkick-d{color:var(--faint)}

/* ---------- 顶栏 ---------- */
.gtop{border-bottom:1px solid var(--line);background:var(--bg)}
.gtop-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center}
.glogo{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.glogo i{width:8px;height:8px;background:var(--red);display:block;flex:0 0 8px}
.gmenu{margin-left:auto;display:flex;gap:36px}
.gmenu a{font-size:13px;color:var(--body);white-space:nowrap;padding:3px 0;border-bottom:1px solid transparent}
.gmenu a:hover{color:var(--ink)}
.gmenu a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.greg{margin-left:36px;font-size:13px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.gmb{display:none;margin-left:auto;width:32px;height:32px;background:none;border:0;cursor:pointer;position:relative}
.gmb i{display:block;height:1.5px;background:var(--ink);margin:6px 0}
.gmn{display:none;border-bottom:1px solid var(--line);background:var(--bg)}
.gmn.open{display:block}
.gmn a{display:block;padding:14px var(--pad);font-size:14px;color:var(--body);border-top:1px solid var(--line2)}

/* ---------- 首屏 ---------- */
.ghero{padding:104px 0 72px}
.ghero h1{font-size:64px;line-height:1.08;letter-spacing:-.035em;font-weight:700;color:var(--ink)}
.ghero h1 span{display:block}
.ghero .gsub{font-size:16px;color:var(--body);max-width:34em;margin-top:32px}
.ghero .gacts{margin-top:40px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.gbtn{background:var(--ink);color:#fff;font-size:14px;font-weight:700;padding:14px 30px;display:inline-block;border:1px solid var(--ink)}
.gbtn:hover{background:#2c2c2c}
.glk b{font-size:14px;color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:2px}
.gmark{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;align-self:end;padding-bottom:6px}
.gmark i{width:8px;height:8px;background:var(--red);display:block;margin-bottom:14px}
.gmark span{font-size:11px;letter-spacing:.3em;color:var(--faint)}

/* ---------- 网格示意条 ---------- */
.gguide{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--blk);padding:18px 0}
.gguide .gcols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.gguide .gcols div{height:26px;background:#e3e3e0;position:relative}
.gguide .gcols div b{position:absolute;left:0;top:32px;font-size:10px;letter-spacing:.14em;color:var(--faint);font-weight:400}
.gguide .gcap{margin-top:52px;font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase}

/* ---------- 规则带 ---------- */
.grule{border-top:1px solid var(--line);padding:20px 0}
.grule .n{font-size:12px;color:var(--mute);letter-spacing:.06em}

/* ---------- 网格段落 ---------- */
.gsec{padding:72px 0;border-top:1px solid var(--line)}
.gidx i{width:8px;height:8px;background:var(--red);display:block;margin-bottom:16px}
.gidx span{font-size:11px;letter-spacing:.3em;color:var(--faint)}
.gsec h2{font-size:32px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);font-weight:700;margin-bottom:20px}
.gsec p{font-size:16px;color:var(--body);margin-bottom:16px}
.gsec .gnum{text-align:right}
.gsec .gnum b{display:block;font-size:40px;font-weight:300;color:var(--ink);letter-spacing:-.03em;line-height:1}
.gsec .gnum span{font-size:11px;letter-spacing:.24em;color:var(--mute);display:block;margin-top:12px}

/* ---------- 图片带（按网格排，统一幅面高度，不做圆角） ---------- */
.gimgband{border-top:1px solid var(--line)}
.gimgband .gb{display:grid;grid-template-columns:repeat(3,1fr)}
.gimgband .gb figure{margin:0;border-right:1px solid var(--line)}
.gimgband .gb figure:last-child{border-right:0}
.gimgband img{width:100%;height:280px;object-fit:cover;display:block}
.gimgband figcaption{border-top:1px solid var(--line2);padding:16px 20px;font-size:11px;letter-spacing:.16em;color:var(--mute)}
.gimgband .gcap2{font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;padding:20px 0}

/* ---------- 数据带 ---------- */
.gstats{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--blk)}
.gstats .st{display:grid;grid-template-columns:repeat(4,1fr)}
.gstats .st>div{padding-left:24px;border-left:1px solid var(--line)}
.gstats .st>div:first-child{border-left:0;padding-left:0}
.gstats b{display:block;font-size:56px;font-weight:300;letter-spacing:-.04em;color:var(--ink);line-height:1.05}
.gstats span{font-size:11px;letter-spacing:.24em;color:var(--mute);text-transform:uppercase;display:block;margin-top:14px}

/* ---------- 深墨块 ---------- */
.gdark{background:var(--dark);color:#fff;padding:88px 0}
.gdark h3{font-size:40px;line-height:1.22;letter-spacing:-.03em;font-weight:700}
.gdark p{color:#9a9a9a;font-size:16px;margin-top:20px;max-width:30em}
.gdark .go{background:#fff;color:#111;font-size:14px;font-weight:700;padding:14px 30px;display:inline-block}
.gdark .r{display:flex;align-items:center;justify-content:flex-end}

/* ---------- FAQ ---------- */
.gfaq{padding:88px 0}
.gfaq .grow{border-top:1px solid var(--line);padding:26px 0}
.gfaq .gq{font-size:20px;color:var(--ink);font-weight:700;letter-spacing:-.01em;line-height:1.5}
.gfaq .ga{font-size:16px;color:var(--body)}

/* ---------- 页脚 ---------- */
.gft{border-top:1px solid var(--line);padding:64px 0 40px}
.gft h4{font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;margin-bottom:18px;font-weight:400}
.gft li{font-size:13px;color:var(--body);margin-bottom:10px}
.gft li a:hover{color:var(--ink)}
.gft .bot{border-top:1px solid var(--line2);margin-top:56px;padding-top:22px;font-size:12px;color:var(--faint);letter-spacing:.04em}

/* ---------- L1 栏目页：区块网格 ---------- */
.ghead{padding:88px 0 44px}
.ghead h1{font-size:48px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.ghead .gsub{font-size:16px;color:var(--body);margin-top:20px;max-width:44em}
.ghead .cnt{text-align:right;font-size:12px;color:var(--mute);letter-spacing:.14em;padding-top:24px}
.gcrumbs{font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;margin-bottom:24px}
.gcells{border-top:1px solid var(--line);border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.gcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 28px 36px;min-height:200px;position:relative;display:block}
.gcell:hover{background:var(--blk)}
.gcell i{width:8px;height:8px;background:var(--red);display:block;margin-bottom:18px}
.gcell .k{font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase}
.gcell h3{font-size:20px;font-weight:700;color:var(--ink);line-height:1.45;margin-top:12px;letter-spacing:-.01em}
.gcell .d{position:absolute;left:28px;bottom:26px;font-size:12px;color:var(--faint);letter-spacing:.06em}
.gpager{padding:40px 0;display:flex;gap:26px;align-items:center}
.gpager a{font-size:14px;color:var(--mute);letter-spacing:.1em}
.gpager a.on{color:var(--red)}
.gpager a:hover{color:var(--ink)}

/* ---------- L2 文章页：悬挂边注 ---------- */
.gart{padding:64px 0 96px}
.gart h1{font-size:48px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.18}
.gmeta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-top:32px}
.gmeta span{font-size:12px;color:var(--mute);letter-spacing:.06em}
.gnote{position:sticky;top:40px}
.gnote .k{font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;margin-bottom:20px}
.gnote li{font-size:12px;color:var(--faint);letter-spacing:.08em;padding:10px 0;border-bottom:1px solid var(--line2);line-height:1.6}
.gnote li.on{color:var(--red)}
.gtxt{padding-top:56px}
.gtxt h2{font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-.02em;border-top:1px solid var(--line);padding-top:28px;margin:56px 0 20px}
.gtxt h2 b{color:var(--red);font-size:16px;letter-spacing:.1em;display:block;margin-bottom:10px;font-weight:700}
.gtxt p{font-size:16px;color:var(--body);margin-bottom:18px}
.gtxt .pull{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:32px 0;font-size:17px;color:var(--ink)}
.gfig{margin:40px 0}
.gfig img{width:100%;height:auto;border:1px solid var(--line)}
.gfig figcaption{font-size:12px;color:var(--faint);letter-spacing:.06em;margin-top:12px;border-top:1px solid var(--line2);padding-top:10px}
.grel{border-top:1px solid var(--line);margin-top:72px;padding-top:28px}
.grel .gcells{border:0;grid-template-columns:repeat(3,1fr)}
.grel .gcell{border-right:0;border-bottom:0;padding:0 28px 0 0;min-height:0}
.grel .gcell h3{font-size:15px;font-weight:400;color:var(--body);line-height:1.6;margin-top:0}
.grel .gcell:hover{background:none}
.grel .gcell:hover h3{color:var(--ink)}
.gnote-art{border-left:1px solid var(--line);padding-left:20px;margin-top:32px;font-size:12px;color:var(--faint);letter-spacing:.04em}
.gprevnext{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.gprevnext a{padding:22px 0;font-size:14px;color:var(--body);letter-spacing:.02em}
.gprevnext a:hover{color:var(--ink)}
.gprevnext a.nx{text-align:right;border-left:1px solid var(--line);padding-left:24px}
.gprevnext a.pv{padding-right:24px}
.gprevnext a span{display:block;font-size:11px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase;margin-bottom:8px}
.gsamegroup{border-top:1px solid var(--line);margin-top:40px;padding-top:24px}
.gsamegroup li{border-bottom:1px solid var(--line2);padding:12px 0}
.gsamegroup li a{font-size:14px;color:var(--body);display:flex;gap:14px}
.gsamegroup li a:hover{color:var(--ink)}
.gsamegroup li b{font-size:11px;letter-spacing:.2em;color:var(--faint);font-weight:400;flex:0 0 56px;padding-top:4px}

/* ---------- 信任页 / 404 ---------- */
.gpg{padding:88px 0 96px}
.gpg h1{font-size:48px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.18;margin-top:16px}
.gpg .gmain h2{font-size:24px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);padding-top:24px;margin:44px 0 16px}
.gpg .gmain p{font-size:16px;color:var(--body);margin-bottom:14px}
.gpg .gerr{margin-top:56px}
.gpg .gerr .code{font-size:120px;font-weight:300;letter-spacing:-.06em;color:var(--ink);line-height:1}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  :root{--pad:22px;--gut:16px}
  .gmenu,.greg{display:none}
  .gmb{display:block}
  /* 关键：行内 style="grid-column:a/b" 的优先级高于样式表，必须 !important 才能压回满栏 */
  .g12 > *{grid-column:1/13 !important}
  .ghero{padding:64px 0 44px}
  .ghero h1{font-size:38px;letter-spacing:-.03em}
  .ghero .gmark{display:none}
  .gguide{padding:14px 0}
  .gguide .gcols{column-gap:4px}
  .gguide .gcols div{height:18px}
  .gguide .gcols div b{display:none}      /* 390px 下 12 个列号挤成一团，只留色块节奏 */
  .gguide .gcap{margin-top:20px;font-size:10px}
  .gsec{padding:48px 0}
  .gsec h2{font-size:24px}
  .gsec .gidx,.gsec .gnum{grid-column:1/13 !important}
  .gsec .gnum{text-align:left;margin-top:20px}
  .gsec .gnum b{font-size:30px}
  .gstats .st{grid-template-columns:repeat(2,1fr);gap:0}
  .gstats .st>div{padding-left:0;border-left:0;padding-bottom:26px}
  .gstats b{font-size:34px}
  .gdark{padding:56px 0}
  .gdark h3{font-size:26px}
  .gdark .r{justify-content:flex-start;margin-top:28px}
  .gfaq{padding:56px 0}
  .gfaq .gq{font-size:17px}
  .gfaq .ga{margin-top:10px}
  .ghead{padding:56px 0 30px}
  .ghead h1{font-size:30px}
  .ghead .cnt{text-align:left;padding-top:14px}
  .gcells{grid-template-columns:1fr}
  .gcell{min-height:0;padding:24px 22px 60px}
  .gart{padding:40px 0 64px}
  .gart h1{font-size:28px}
  .gmeta{margin-top:22px}
  .gmeta span{display:block;margin-bottom:6px}
  .gnote{position:static;margin-top:28px}
  .gnote li{display:inline-block;border:0;padding-right:16px}
  .gtxt{padding-top:8px}
  .gtxt h2{font-size:24px;margin:40px 0 16px}
  .grel .gcells{grid-template-columns:1fr}
  .grel .gcell{padding:0 0 18px}
  .gimgband .gb{grid-template-columns:1fr}
  .gimgband .gb figure{border-right:0;border-bottom:1px solid var(--line)}
  .gimgband img{height:200px}
  .gprevnext{grid-template-columns:1fr}
  .gprevnext a.nx{text-align:left;border-left:0;border-top:1px solid var(--line2);padding-left:0}
  .gpg{padding:56px 0 64px}
  .gpg h1{font-size:30px}
  .gpg .gerr .code{font-size:76px}
  .gft{padding:44px 0 30px}
}