.page-contact{
  --contact-flag-bg: rgba(243,196,61,.12);
  --contact-plate-bg: rgba(14,20,18,.62);
  background: var(--paper);
  color: var(--carbon);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-contact img{
  max-width: 100%;
  height: auto;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(20px,3vw,36px) clamp(48px,7vw,100px);
  background: var(--ink);
  color: var(--paper);
}

.page-contact .contact-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-contact .contact-hero__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .24;
}

.page-contact .contact-hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 18%, rgba(28,107,74,.52), transparent 56%),
    radial-gradient(ellipse at 90% 6%, rgba(255,90,42,.32), transparent 52%),
    linear-gradient(180deg, rgba(7,28,22,.55) 0%, rgba(7,28,22,.95) 100%);
}

.page-contact .contact-hero .wrap{
  position: relative;
  z-index: 1;
}

.page-contact .contact-hero .crumbs ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin: 0 0 clamp(22px,3vw,34px);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--steel);
}

.page-contact .contact-hero .crumbs li{
  display: flex;
  align-items: center;
  gap: .5em;
}

.page-contact .contact-hero .crumbs li + li::before{
  content: "/";
  color: rgba(183,195,192,.5);
}

.page-contact .contact-hero .crumbs a{
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid rgba(183,195,192,.4);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}

.page-contact .contact-hero .crumbs a:hover,
.page-contact .contact-hero .crumbs a:focus-visible{
  color: var(--flare);
  border-color: var(--flare);
}

.page-contact .contact-hero__eyebrow{
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--flare);
}

.page-contact .contact-hero h1{
  max-width: 19ch;
  margin: 0 0 clamp(18px,2.4vw,26px);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(29px,5.2vw,58px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-contact .contact-hero__lead{
  max-width: 62ch;
  margin: 0 0 clamp(30px,4.4vw,54px);
  font-size: clamp(15px,1.1vw,17px);
  line-height: 1.8;
  color: rgba(244,241,232,.82);
}

.page-contact .contact-hero__split{
  display: grid;
  gap: clamp(16px,2.4vw,30px);
}

.page-contact .contact-channels{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-contact .channel{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px,3vw,30px);
  border: 1px solid rgba(102,115,111,.55);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  color: inherit;
  text-decoration: none;
  transition: background .26s var(--ease), border-color .26s var(--ease);
}

.page-contact .channel:hover{
  background: rgba(28,107,74,.36);
  border-color: var(--flare);
}

.page-contact .channel:focus-visible{
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

.page-contact .channel__label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--steel);
}

.page-contact .channel__value{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(17px,2.3vw,27px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--paper);
  overflow-wrap: anywhere;
  transition: color .26s var(--ease);
}

.page-contact .channel__value--num{
  letter-spacing: .02em;
}

.page-contact .channel:hover .channel__value{
  color: var(--flare);
}

.page-contact .channel__note{
  font-size: 13px;
  line-height: 1.65;
  color: rgba(244,241,232,.6);
}

.page-contact .contact-plate{
  padding: clamp(20px,3vw,30px);
  border: 1px solid rgba(102,115,111,.42);
  border-radius: var(--r-md);
  background: var(--contact-plate-bg);
}

.page-contact .plate-row{
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(102,115,111,.35);
}

.page-contact .plate-row:first-child{
  padding-top: 0;
}

.page-contact .plate-row:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

.page-contact .plate-key{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--steel);
}

.page-contact .plate-val{
  font-size: 14px;
  line-height: 1.75;
  color: var(--paper);
}

.page-contact .plate-val--mono{
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: var(--signal);
}

/* ---------- 通用区块 ---------- */
.page-contact .contact-block{
  padding-block: clamp(46px,6.6vw,92px);
}

.page-contact .contact-block + .contact-block{
  border-top: 1px solid rgba(102,115,111,.35);
}

.page-contact .block-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  padding-bottom: 18px;
  margin-bottom: clamp(24px,3.4vw,40px);
  border-bottom: 2px solid var(--carbon);
}

.page-contact .block-head__index{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--flare);
}

.page-contact .block-head h2{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(21px,3vw,34px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--carbon);
}

/* ---------- 加急与适用问题 ---------- */
.page-contact .routing{
  display: grid;
  gap: clamp(24px,3.6vw,44px);
}

.page-contact .routing__copy p{
  margin: 0 0 16px;
  font-size: clamp(14.5px,.95vw,16px);
  line-height: 1.85;
  color: var(--panel);
}

.page-contact .routing__flag{
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--contact-flag-bg);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--carbon);
}

.page-contact .routing__figure{
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(102,115,111,.4);
  border-radius: var(--r-md);
  background: var(--ink);
}

.page-contact .routing__figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .routing__figure figcaption{
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--steel);
  background: var(--ink);
}

.page-contact .routing-list{
  margin: clamp(28px,4vw,48px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(102,115,111,.72);
}

.page-contact .routing-list li{
  display: grid;
  gap: 8px 22px;
  padding-block: clamp(18px,2.4vw,26px);
  border-bottom: 1px solid rgba(102,115,111,.35);
}

.page-contact .routing-list__tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--flare);
  padding-top: 5px;
}

.page-contact .routing-list h3{
  margin: 0 0 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--carbon);
}

.page-contact .routing-list p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--panel);
}

.page-contact .routing-list a{
  color: var(--turf);
  text-underline-offset: 3px;
}

.page-contact .routing-list a:hover{
  color: var(--flare);
}

/* ---------- 合作与纠错 ---------- */
.page-contact .collab-list{
  display: grid;
  gap: clamp(20px,3vw,32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .collab-list li{
  padding-top: 18px;
  border-top: 2px solid var(--carbon);
}

.page-contact .collab-list h3{
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--carbon);
}

.page-contact .collab-list p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--panel);
}

.page-contact .collab-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px,3.4vw,38px);
}

/* ---------- 优先入口 ---------- */
.page-contact .contact-links__lead{
  max-width: 64ch;
  margin: 0;
  font-size: clamp(14.5px,.95vw,16px);
  line-height: 1.85;
  color: var(--panel);
}

.page-contact .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(22px,3vw,30px) 0 0;
}

.page-contact .contact-pill{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--carbon);
  text-decoration: none;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}

.page-contact .contact-pill::after{
  content: "→";
  color: var(--flare);
}

.page-contact .contact-pill:hover{
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--flare);
}

.page-contact .contact-pill:hover::after{
  color: var(--flare);
}

.page-contact .contact-pill:focus-visible{
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

.page-contact .contact-links__foot{
  margin: clamp(24px,3.2vw,34px) 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--panel);
}

.page-contact .contact-links__foot a{
  font-family: var(--font-mono);
  color: var(--turf);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.page-contact .contact-links__foot a:hover{
  color: var(--flare);
}

/* ---------- 响应式 ---------- */
@media (min-width: 780px){
  .page-contact .routing-list li{
    grid-template-columns: 96px minmax(0,1fr);
  }
}

@media (min-width: 900px){
  .page-contact .contact-hero__split{
    grid-template-columns: minmax(0,1.36fr) minmax(0,1fr);
    align-items: start;
  }

  .page-contact .routing{
    grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    align-items: start;
  }

  .page-contact .collab-list{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 420px){
  .page-contact .contact-hero h1{
    max-width: none;
  }

  .page-contact .channel__value{
    font-size: 16px;
  }

  .page-contact .contact-pill{
    padding: 11px 18px;
    font-size: 12px;
  }
}
<<<END>>>