/* 呼和浩特远辉塑料原料有限公司 —— 工业双色印刷风格（树脂米白 × 墨蓝） */
:root{
  --ink:#17334d;          /* 墨蓝：来自树脂包装与工业油墨 */
  --ink-deep:#0d2236;
  --paper:#f4f1ea;        /* 树脂米白底色 */
  --paper-2:#eae5da;
  --rust:#a4552f;         /* 低饱和赭色，叠印强调 */
  --line:#c9c2b2;
  --text:#22303c;
  --muted:#5b6773;
  --fs-hero:clamp(2rem,5vw,3.4rem);
  --fs-h1:clamp(1.6rem,3.5vw,2.4rem);
  --fs-h2:1.4rem;
  --fs-h3:1.05rem;
  --fs-body:1rem;
  --fs-small:.8125rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--text);
  font-family:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--fs-body);line-height:1.8;
}
h1,h2,h3{color:var(--ink);line-height:1.3;font-weight:700}
h1{font-size:var(--fs-h1);letter-spacing:.02em}
h2{font-size:var(--fs-h2);border-left:6px solid var(--rust);padding-left:var(--sp-3);margin-bottom:var(--sp-4)}
h3{font-size:var(--fs-h3)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rust)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
p{max-width:68ch}
img{max-width:100%;height:auto}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--sp-6)}
.section{margin-top:var(--sp-16)}
.kicker{font-size:var(--fs-small);letter-spacing:.35em;color:var(--rust);text-transform:uppercase;margin-bottom:var(--sp-3)}

/* 页头 */
.site-head{background:var(--ink);color:var(--paper);border-bottom:4px solid var(--rust)}
.head-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.site-head nav{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.site-head a{color:var(--paper);text-decoration:none;font-size:var(--fs-small);letter-spacing:.1em;padding:var(--sp-1) 0;border-bottom:2px solid transparent}
.site-head a:hover{border-bottom-color:var(--rust);color:#fff}

/* 按钮 */
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:var(--sp-3) var(--sp-6);text-decoration:none;font-weight:700;letter-spacing:.08em;border:2px solid var(--ink)}
.btn:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* 面包屑 */
.breadcrumb{display:flex;gap:var(--sp-2);font-size:var(--fs-small);letter-spacing:.12em;color:var(--muted);margin:var(--sp-6) 0 var(--sp-8)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--rust)}

/* 首页：图文错位首屏 */
.hero.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-12);align-items:center;padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.hero.split h1{font-size:var(--fs-hero);margin-bottom:var(--sp-6)}
.hero-fig{transform:translateY(var(--sp-8))}
.hero-fig img{border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink-deep)}
.lede{margin-bottom:var(--sp-6)}

/* 三栏能力 */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8)}
.col h3{margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:2px solid var(--line)}

/* 色带区块 */
.band{background:var(--ink);color:var(--paper);padding:var(--sp-12) 0}
.band h2{color:var(--paper);border-left-color:var(--rust)}
.band .sec-note{color:#b9c3cd;margin-bottom:var(--sp-8)}

/* 九宫格（契约结构） */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:2px solid var(--ink);filter:grayscale(.2)}
.item h2,.item h3{margin-top:var(--sp-3);font-size:var(--fs-h3)}
.item p{font-size:var(--fs-small);color:var(--muted);margin-top:var(--sp-1)}
.item ul{margin:var(--sp-2) 0 0 var(--sp-4);font-size:var(--fs-small)}
.item li{margin-bottom:var(--sp-1)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}

/* 步骤 */
.steps{counter-reset:s;list-style:none;margin-top:var(--sp-6)}
.steps li{counter-increment:s;position:relative;padding-left:var(--sp-12);margin-bottom:var(--sp-6);max-width:68ch}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-size:1.8rem;font-weight:700;color:var(--rust);letter-spacing:.05em}
.steps.tall li{margin-bottom:var(--sp-8)}

/* 首页 FAQ */
.faq-home dl{margin-top:var(--sp-6)}
dt{font-weight:700;color:var(--ink);margin-top:var(--sp-6)}
dd{margin:var(--sp-2) 0 0 var(--sp-4);max-width:68ch}
.qa dl{margin-top:var(--sp-4)}

/* CTA */
.cta{background:var(--rust);color:#fff;padding:var(--sp-12) 0;text-align:left}
.cta h2{color:#fff;border-left-color:var(--ink)}
.cta .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta .btn:hover{background:#fff;color:var(--ink)}
.cta-inline{border:3px double var(--ink);padding:var(--sp-8)}

/* 书籍章节（about/guide/faq 首屏） */
.chapter{border-bottom:3px solid var(--ink);padding:var(--sp-8) 0 var(--sp-6);margin-top:var(--sp-6)}
.chapter h1{font-size:var(--fs-hero)}
.chapter-no{font-size:var(--fs-small);letter-spacing:.3em;color:var(--rust);margin-bottom:var(--sp-3)}

/* 长文（about / guide） */
.prose{padding:var(--sp-12) 0;max-width:820px}
.prose h2{margin-top:var(--sp-12)}
.prose p{margin-bottom:var(--sp-4)}
.side-fig{float:right;margin:0 0 var(--sp-6) var(--sp-8);max-width:320px;border:2px solid var(--ink);padding:var(--sp-2);background:#fff}
.article{max-width:820px}

/* 表格 */
table{width:100%;border-collapse:collapse;margin:var(--sp-6) 0;font-size:var(--fs-small)}
caption{caption-side:top;text-align:left;font-weight:700;color:var(--ink);padding-bottom:var(--sp-2)}
th,td{border:1px solid var(--line);padding:var(--sp-2) var(--sp-3);text-align:left;vertical-align:top}
th{background:var(--paper-2);color:var(--ink)}

/* 联系页：左右分栏 */
.contact-grid{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-12);padding-bottom:var(--sp-12)}
.contact-grid .span2{grid-column:1 / -1}
.contact-side{border-right:2px solid var(--line);padding-right:var(--sp-8)}
.contact-side h1{font-size:var(--fs-h1);margin-bottom:var(--sp-4)}
.contact-side figure{margin-top:var(--sp-6)}
.contact-side img{border:2px solid var(--ink)}

/* 服务页满幅色块首屏 */
.hero.block{background:var(--ink);color:var(--paper);margin:0 calc(-1 * var(--sp-6));padding:var(--sp-12) var(--sp-6)}
.hero.block h1{color:var(--paper);font-size:var(--fs-h1)}
.hero.block p{color:#c8d1da;margin:var(--sp-4) 0 var(--sp-8)}
.hero.block figure img{display:block;width:100%}

/* 页脚 */
.site-foot{background:var(--ink-deep);color:#9fb0bf;margin-top:var(--sp-16);padding:var(--sp-8) 0;font-size:var(--fs-small)}
.site-foot a{color:#c8d1da}
.site-foot nav{margin-top:var(--sp-2);letter-spacing:.1em}

@media(max-width:900px){
  .hero.split{grid-template-columns:1fr;gap:var(--sp-8)}
  .hero-fig{transform:none}
  .cols{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-side{border-right:none;border-bottom:2px solid var(--line);padding-right:0;padding-bottom:var(--sp-6)}
  .side-fig{float:none;margin:var(--sp-4) 0;max-width:100%}
  .band{padding:var(--sp-8) 0}
}