@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#12121A;
  --red:#FF3B2F;
  --cream:#F2F0EA;
  --panel:#1B1B25;
  --line:rgba(242,240,234,.14);
  --dim:#A6A6B2;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:Inter,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  letter-spacing:-.01em;
  padding-bottom:96px;
}

img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
a{color:inherit;text-decoration:none;transition:color .16s ease,background-color .16s ease,border-color .16s ease,opacity .16s ease}
a:hover{color:var(--red)}
menu{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.18}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.ico{width:18px;height:18px;flex:none}

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr;
}

/* ---------- 侧栏 ---------- */
.side{
  padding:22px 0 18px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  display:block;
  color:var(--red);
  font-weight:600;
  font-size:16px;
  letter-spacing:.14em;
  margin-bottom:6px;
}
.side-h{
  font-size:22px;
  margin-bottom:14px;
}
.side-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.side-list li{margin:0}
.side-list a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:2px 12px;
  font-size:16px;
  border:1px solid var(--line);
  border-bottom:3px solid var(--line);
  border-radius:var(--r);
  color:var(--cream);
}
.side-list a:hover{
  border-bottom-color:var(--red);
  color:var(--red);
}
.side-list b{
  font-size:16px;
  font-weight:600;
  color:var(--red);
  letter-spacing:.04em;
}

/* ---------- 主区 ---------- */
main{padding-bottom:34px}

.paper{min-width:0}

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-content:center;
  min-height:70vh;
  padding:26px 0 26px;
}
.hero-art{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  border-bottom:4px solid var(--red);
  background:var(--red);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.hero-num{
  font-size:clamp(96px,26vw,240px);
  font-weight:700;
  letter-spacing:-.06em;
  line-height:.86;
  color:var(--ink);
  opacity:.62;
}
.hero-txt{text-align:right}
.hero-txt h1{
  font-size:clamp(34px,7vw,62px);
  line-height:1.06;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
.lead{
  color:var(--dim);
  font-size:17px;
  max-width:46ch;
  margin:0 0 0 auto;
}

/* ---------- 正文 ---------- */
.body{min-width:0}
.body > article{
  padding:26px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:22px;
  scroll-margin-bottom:110px;
}
.body > article:first-child{border-top:0}

.body h2{
  font-size:clamp(24px,3.8vw,34px);
  margin-bottom:.55em;
}
.body h3{
  font-size:20px;
  color:var(--red);
  margin:1.5em 0 .45em;
}
.body small{
  color:var(--red);
  font-weight:600;
  letter-spacing:.12em;
}
.body > article > small{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}
.body p,
.body li{max-width:70ch}
.body ul,.body ol{padding-left:1.25em;margin:0 0 1em}
.body li{margin-bottom:.4em}
.body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.body a:hover{color:var(--cream)}
.body blockquote{
  margin:1.2em 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--red);
  color:var(--dim);
}
.body strong{color:var(--cream)}
.body table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:1em 0;
}
.body th,.body td{
  border:1px solid var(--line);
  padding:8px 10px;
  text-align:left;
}
.body th{color:var(--red);font-weight:600}
.body code{
  font-size:.94em;
  background:var(--panel);
  padding:1px 5px;
  border-radius:var(--r);
}
.body pre{
  background:var(--panel);
  padding:14px;
  border-radius:var(--r);
  overflow-x:auto;
}
.body pre code{background:none;padding:0}
.body hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}

/* ---------- 底部固定导航 ---------- */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--ink);
  border-top:2px solid var(--red);
}
.dock-menu{position:relative}
.dock-menu summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:0 12px;
  font-size:16px;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.dock-menu summary::-webkit-details-marker{display:none}
.bars{
  display:block;
  position:relative;
  width:18px;height:2px;
  background:currentColor;
}
.bars::before,
.bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;height:2px;
  background:currentColor;
}
.bars::before{top:-6px}
.bars::after{top:6px}
.dock-menu[open] > summary{
  background:var(--red);
  border-color:var(--red);
  color:var(--ink);
}
.dock-list{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:8px;
  min-width:min(90vw,430px);
  max-height:60vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.dock-link{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:0 12px;
  font-size:16px;
  border-radius:var(--r);
  color:var(--cream);
}
.dock-link:hover{
  background:var(--red);
  color:var(--ink);
}
.dock-side{display:none;gap:4px}
.dock-brand{
  margin:0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 10px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.dock-contact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:48px;
  padding:0 12px;
  font-size:16px;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.dock-contact:hover{
  border-color:var(--red);
  color:var(--red);
}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1180px;
  margin:0 auto;
  padding:34px 18px 118px;
  border-top:2px solid var(--red);
}
.foot-brand{
  font-size:clamp(58px,17vw,148px);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.06em;
  color:#2C2C3A;
  margin:0 0 22px;
}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 24px;
}
.foot-cols dl{margin:0}
.foot-cols dt{
  color:var(--red);
  font-weight:600;
  font-size:16px;
  letter-spacing:.1em;
  margin-bottom:6px;
}
.foot-cols dd{margin:0}
.foot-cols dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:var(--dim);
}
.foot-cols dd a:hover{color:var(--red)}
.foot-line{
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:16px;
  color:var(--dim);
}

/* ---------- 揭示动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .hero-art{aspect-ratio:16/10}
  .foot-cols{gap:24px}
}

@media (min-width:900px){
  .shell{
    grid-template-columns:230px minmax(0,1fr);
    gap:0 44px;
    padding-top:34px;
  }
  .side{
    position:sticky;
    top:30px;
    align-self:start;
    border-bottom:0;
    border-right:1px solid var(--line);
    padding:0 22px 20px 0;
    margin-top:6px;
  }
  .side-list{flex-direction:column;flex-wrap:nowrap}
  .side-list a{width:100%}
  .hero{
    grid-template-columns:.92fr 1fr;
    align-items:center;
    gap:34px;
    min-height:70vh;
  }
  .hero-art{aspect-ratio:4/5}
  .body > article{padding:34px 0}
  .foot{padding-bottom:140px}
}

@media (min-width:1024px){
  .dock-side{display:flex}
  .dock{gap:10px;padding:10px 20px}
  .dock-link{min-height:44px;padding:0 10px}
  .dock-brand{font-size:20px}
}

button[aria-expanded]{min-width:44px;min-height:44px}