/* ============================================================
   Dehua Joy Art — 2026R1
   设计语言：inverted masthead / hairline rules / asymmetric grid
   与 Newcose 的暖米色+陶土棕完全区分
   ============================================================ */

:root{
  --bone:#f4f2ee;        /* 底：冷调骨白，不是 newcose 的暖米 */
  --ink:#121417;         /* 近黑，冷调 */
  --ink-2:#1c2025;
  --slate:#5c6169;       /* 次级文字 */
  --hair:#d8d5ce;        /* 发丝线 */
  --hair-d:#2c3138;      /* 深底上的线 */
  --pine:#0f4c46;        /* 深松石绿 —— 主色，直接来自德化高温釉 */
  --pale:#9fd5cb;        /* 浅釉绿 —— 深底上的强调 */
  --paper:#fff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Songti SC","Source Han Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---------- 顶部深色报头 ---------- */
.masthead{background:var(--ink);color:var(--bone)}
.masthead .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 0;flex-wrap:wrap;
}
.wordmark{display:flex;align-items:baseline;gap:12px;font-family:var(--serif)}
.wordmark .w1{font-size:23px;letter-spacing:.02em;line-height:1}
.wordmark .w2{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--pale)}
.nav{display:flex;gap:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav a{color:rgba(244,242,238,.7);padding-bottom:3px;border-bottom:1px solid transparent;transition:.18s}
.nav a:hover{color:#fff}
.nav a.on{color:var(--pale);border-bottom-color:var(--pale)}

/* ---------- 首页报头区 ---------- */
.lead-block{border-bottom:1px solid var(--hair-d);padding:60px 0 66px}
.lead-block .eyebrow{
  font-size:11px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--pale);margin-bottom:22px;
}
.lead-block h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.6vw,64px);line-height:1.08;
  letter-spacing:-.015em;max-width:17ch;
}
.lead-block h1 em{font-style:italic;color:var(--pale)}
.lead-block .standfirst{
  margin-top:26px;max-width:60ch;font-size:17px;
  color:rgba(244,242,238,.72);line-height:1.72;
}
.lead-block .acts{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:13px 28px;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--bone);background:var(--bone);color:var(--ink);
  transition:.18s;
}
.btn:hover{background:var(--pale);border-color:var(--pale)}
.btn.line{background:transparent;color:var(--bone);border-color:rgba(244,242,238,.34)}
.btn.line:hover{background:transparent;border-color:var(--pale);color:var(--pale)}

/* 深底上的数据条 */
.ticker{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair-d)}
.ticker div{padding:22px 0 24px;border-right:1px solid var(--hair-d)}
.ticker div:last-child{border-right:0}
.ticker b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;color:var(--bone)}
.ticker span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,238,.5);margin-top:5px}

/* ---------- 通用区块 ---------- */
.sec{padding:64px 0}
.sec.alt{background:var(--bone)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--hair);margin-bottom:38px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);letter-spacing:-.01em}
.sec-head .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--pine);margin-bottom:10px}
.sec-head p{color:var(--slate);font-size:14.5px;max-width:44ch}

/* ---------- 产品范围：两栏数字排版，不用图卡 ---------- */
.ranges{border-top:1px solid var(--hair)}
.range{
  display:grid;grid-template-columns:72px 1fr 1.35fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--hair);
  align-items:start;transition:background .18s;
}
.range:hover{background:rgba(15,76,70,.045)}
.range .no{font-family:var(--mono);font-size:12px;color:var(--pine);letter-spacing:.06em;padding-top:5px}
.range h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.25;letter-spacing:-.005em}
.range h3 small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-top:8px;font-weight:400}
.range .body p{color:var(--slate);font-size:14.8px;margin-bottom:10px}
.range .body p:last-child{margin-bottom:0}
.range .body .tags{font-family:var(--mono);font-size:11.5px;color:var(--pine);letter-spacing:.02em}

/* ---------- 三栏说明 ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair)}
.cols3 > div{padding:34px 32px 34px 0;border-right:1px solid var(--hair)}
.cols3 > div:last-child{border-right:0;padding-right:0}
.cols3 h3{font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:12px}
.cols3 p{color:var(--slate);font-size:14.5px}

/* ---------- 流程条 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--ink);color:var(--bone)}
.flow div{padding:32px 26px 34px;border-right:1px solid var(--hair-d)}
.flow div:last-child{border-right:0}
.flow b{font-family:var(--mono);font-size:11px;color:var(--pale);letter-spacing:.06em}
.flow h4{font-family:var(--serif);font-weight:400;font-size:17px;margin:12px 0 8px}
.flow p{font-size:13px;color:rgba(244,242,238,.62);line-height:1.6}

/* ---------- 收尾 CTA ---------- */
.closing{padding:76px 0;text-align:center;border-top:1px solid var(--hair)}
.closing .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--pine);margin-bottom:16px}
.closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.015em;margin-bottom:16px}
.closing p{color:var(--slate);max-width:52ch;margin:0 auto 30px;font-size:15.5px}
.closing .btn{background:var(--pine);border-color:var(--pine);color:#fff}
.closing .btn:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- 内页头 ---------- */
.page-head{padding:52px 0 34px;border-bottom:1px solid var(--hair)}
.page-head .kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--pine);margin-bottom:14px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.015em;line-height:1.1}
.page-head p{margin-top:16px;color:var(--slate);max-width:62ch;font-size:16px}

/* ---------- 产品清单（无图，规格表式） ---------- */
.rgroup{padding:50px 0;border-bottom:1px solid var(--hair)}
.rgroup:last-of-type{border-bottom:0}
.rgroup-head{display:grid;grid-template-columns:72px 1fr;gap:32px;margin-bottom:26px;align-items:baseline}
.rgroup-head .no{font-family:var(--mono);font-size:12px;color:var(--pine)}
.rgroup-head h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.rgroup-head p{color:var(--slate);font-size:14.5px;margin-top:8px;max-width:66ch}
table.sheet{width:100%;border-collapse:collapse;font-size:14px}
table.sheet th{
  text-align:left;font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  padding:0 16px 10px 0;border-bottom:1px solid var(--ink);
}
table.sheet td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-2)}
table.sheet td.code{font-family:var(--mono);font-size:12.5px;color:var(--pine);white-space:nowrap;letter-spacing:.02em}
table.sheet td.note{color:var(--slate);font-size:13.5px}
table.sheet tr:hover td{background:rgba(15,76,70,.04)}

/* 无图占位（后续换图只改这里） */
.slot{
  margin-top:34px;border:1px dashed var(--hair);background:#fff;
  padding:26px 28px;display:flex;gap:20px;align-items:flex-start;
}
.slot .mark{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.08em;white-space:nowrap;padding-top:2px}
.slot p{font-size:13.5px;color:var(--slate);line-height:1.6}

/* ---------- 联系页 ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;padding:56px 0 24px}
.cbox{border-top:1px solid var(--ink);padding-top:16px;margin-bottom:34px}
.cbox h3{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:10px}
.cbox .big{font-family:var(--serif);font-size:22px;letter-spacing:-.005em;word-break:break-word}
.cbox .big a{border-bottom:1px solid var(--hair);transition:.18s}
.cbox .big a:hover{border-bottom-color:var(--pine);color:var(--pine)}
.cbox p{color:var(--slate);font-size:14.5px;margin-top:8px}
.steps{counter-reset:s;list-style:none}
.steps li{
  position:relative;padding:0 0 22px 40px;border-bottom:1px solid var(--hair);
  margin-bottom:22px;color:var(--slate);font-size:14.5px;
}
.steps li:last-child{border-bottom:0;margin-bottom:0}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11px;color:var(--pine);
}
.steps li b{display:block;color:var(--ink);font-family:var(--serif);font-weight:400;font-size:16px;margin-bottom:4px}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink);color:rgba(244,242,238,.6);padding:44px 0;font-size:12.5px}
.foot .row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot .wordmark .w1{font-size:19px;color:var(--bone)}
.foot .wordmark .w2{color:var(--pale)}
.foot h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,238,.4);
  font-weight:500;margin-bottom:12px}
.foot a:hover{color:var(--pale)}
.foot .legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--hair-d);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:rgba(244,242,238,.4)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .range{grid-template-columns:52px 1fr;gap:20px}
  .range .body{grid-column:2}
  .cols3{grid-template-columns:1fr}
  .cols3 > div{border-right:0;border-bottom:1px solid var(--hair);padding:26px 0}
  .cols3 > div:last-child{border-bottom:0}
  .flow{grid-template-columns:1fr 1fr}
  .flow div{border-bottom:1px solid var(--hair-d)}
  .ticker{grid-template-columns:1fr 1fr}
  .ticker div:nth-child(2){border-right:0}
  .cgrid{grid-template-columns:1fr;gap:44px}
  .foot .row{grid-template-columns:1fr}
  .rgroup-head{grid-template-columns:1fr;gap:10px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .masthead .bar{padding:18px 0}
  .nav{gap:16px;font-size:11px}
  .lead-block{padding:42px 0 48px}
  .flow{grid-template-columns:1fr}
  .flow div{border-right:0}
  .ticker{grid-template-columns:1fr 1fr}
  table.sheet{font-size:13px}
  table.sheet th:nth-child(3),table.sheet td:nth-child(3){display:none}
}