.page-contact{
  --ct-hair:rgba(26,21,18,.12);
  --ct-hair-soft:rgba(221,209,188,.72);
  background:var(--cream);
  color:var(--ink);
  padding-bottom:clamp(36px,6vw,80px);
}

.page-contact .ct-crumb-row{
  padding-top:clamp(14px,2.6vw,26px);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(20px,4vw,48px) 0 clamp(34px,6vw,76px);
  background:
    radial-gradient(circle at 88% 6%,rgba(182,46,28,.10),transparent 46%),
    linear-gradient(180deg,rgba(221,209,188,.42),rgba(247,240,228,0) 72%);
}

.page-contact .ct-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--ct-hair-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ct-hair-soft) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.55;
  mask-image:linear-gradient(180deg,#000,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);
}

.page-contact .ct-hero-grid{
  position:relative;
  display:grid;
  gap:clamp(22px,3.4vw,44px);
}

.page-contact .ct-hero-rail{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,20px);
}

.page-contact .ct-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px,7.6vw,58px);
  line-height:1.12;
  letter-spacing:.02em;
  color:var(--ink);
}

.page-contact .ct-title::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  margin-top:14px;
  background:var(--zhu);
  border-radius:1px;
}

.page-contact .ct-rail-note{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--jin-dark);
  font-variant-numeric:tabular-nums;
}

.page-contact .ct-path{
  display:none;
}

.page-contact .ct-path path{
  fill:none;
  stroke:var(--jin);
  stroke-width:1.6;
  stroke-dasharray:5 6;
  stroke-linecap:round;
}

.page-contact .ct-path circle{
  fill:var(--zhu);
  stroke:none;
}

.page-contact .ct-hero-media{
  margin:0;
  max-width:260px;
  border:1px solid var(--ct-hair);
  background:var(--paper);
  padding:8px;
  border-radius:var(--radius);
}

.page-contact .ct-hero-media img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}

.page-contact .ct-hero-media .media-caption{
  font-size:12px;
  line-height:1.6;
  color:rgba(26,21,18,.66);
  padding:8px 2px 0;
}

.page-contact .ct-hero-main{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.6vw,28px);
}

.page-contact .ct-lead{
  margin:0;
  font-size:16px;
  line-height:1.9;
  max-width:62ch;
  color:rgba(26,21,18,.86);
  border-left:3px solid var(--jin);
  padding-left:clamp(12px,1.8vw,18px);
}

/* ---------- 渠道卡 ---------- */
.page-contact .ct-channels{
  display:grid;
  gap:clamp(12px,1.8vw,20px);
}

.page-contact .ct-chan{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(18px,2.4vw,26px);
  border-radius:var(--radius);
  border:1px solid transparent;
}

.page-contact .ct-chan-label{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  opacity:.78;
  font-variant-numeric:tabular-nums;
}

.page-contact .ct-chan-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px,2.4vw,24px);
  line-height:1.3;
  letter-spacing:.02em;
}

.page-contact .ct-chan-value{
  margin:0;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.01em;
  word-break:break-word;
  padding-bottom:8px;
  border-bottom:1px dashed currentColor;
  opacity:.92;
}

.page-contact .ct-chan-desc{
  margin:0;
  font-size:14px;
  line-height:1.8;
}

.page-contact .ct-chan-meta{
  margin:0;
  margin-top:auto;
  font-size:12px;
  letter-spacing:.06em;
  opacity:.78;
}

.page-contact .ct-chan--zhu{
  background:var(--zhu);
  color:var(--cream);
  box-shadow:0 14px 30px -22px rgba(140,31,18,.9);
}

.page-contact .ct-chan--indigo{
  background:var(--indigo);
  color:var(--paper);
  box-shadow:0 14px 30px -22px rgba(31,58,95,.9);
}

.page-contact .ct-chan--paper{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--sand);
  box-shadow:0 14px 30px -24px rgba(26,21,18,.45);
}

.page-contact .ct-chan-btn{
  align-self:flex-start;
  margin-top:6px;
}

/* ---------- 来信清单 ---------- */
.page-contact .ct-letter{
  padding-top:clamp(30px,5vw,64px);
}

.page-contact .ct-letter-grid{
  row-gap:clamp(22px,3vw,34px);
}

.page-contact .ct-h2{
  margin:0 0 14px;
  line-height:1.28;
}

.page-contact .ct-side-text{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:rgba(26,21,18,.74);
  border-left:2px solid var(--sand);
  padding-left:14px;
}

.page-contact .ct-letter-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.page-contact .ct-letter-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}

.page-contact .ct-letter-list li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  column-gap:14px;
  row-gap:4px;
  padding:clamp(12px,1.8vw,16px) 0;
  border-bottom:1px dashed var(--ct-hair);
}

.page-contact .ct-letter-list li::before{
  content:"";
  grid-row:1 / span 2;
  width:14px;
  height:14px;
  margin-top:5px;
  border:1.5px solid var(--jin-dark);
  border-radius:1px;
  background:linear-gradient(135deg,transparent 46%,var(--jin-dark) 46%,var(--jin-dark) 54%,transparent 54%);
  opacity:.7;
}

.page-contact .ct-letter-list strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:.02em;
}

.page-contact .ct-letter-list span{
  font-size:14px;
  line-height:1.8;
  color:rgba(26,21,18,.78);
}

.page-contact .ct-note-line{
  margin:0;
  font-size:13px;
  line-height:1.8;
  color:var(--jin-dark);
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

/* ---------- 处理节奏 ---------- */
.page-contact .ct-timing{
  background:linear-gradient(180deg,rgba(221,209,188,.36),rgba(247,240,228,.1));
  border-top:1px solid var(--ct-hair);
  border-bottom:1px solid var(--ct-hair);
}

.page-contact .ct-timing-grid{
  display:grid;
  gap:clamp(20px,3vw,36px);
}

.page-contact .ct-timing-lead{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.9;
  color:rgba(26,21,18,.84);
  max-width:60ch;
}

.page-contact .ct-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  counter-reset:ctstep;
}

.page-contact .ct-steps li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:start;
  font-size:14px;
  line-height:1.8;
  padding-top:12px;
  border-top:1px solid var(--ct-hair);
}

.page-contact .ct-step-no{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--zhu);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

.page-contact .ct-timing-side{
  background:var(--paper);
  border:1px solid var(--sand);
  border-left:4px solid var(--indigo);
  border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-contact .ct-timing-badge{
  margin:8px 0 0;
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--paper);
  background:var(--indigo);
  padding:5px 10px;
  border-radius:2px;
}

.page-contact .ct-timing-badge--jade{
  background:var(--jade);
}

.page-contact .ct-timing-side-text{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:rgba(26,21,18,.8);
}

/* ---------- 自助入口 ---------- */
.page-contact .ct-help-head{
  max-width:66ch;
}

.page-contact .ct-help-lead{
  margin:0;
  font-size:15px;
  line-height:1.9;
  color:rgba(26,21,18,.8);
}

.page-contact .ct-filter{
  flex-wrap:wrap;
  margin:clamp(16px,2.4vw,24px) 0 clamp(18px,2.6vw,26px);
}

.page-contact .ct-help-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(12px,1.8vw,18px);
}

.page-contact .ct-help-item{
  background:var(--paper);
  border:1px solid var(--sand);
  border-left:3px solid var(--jin);
  border-radius:var(--radius);
  padding:clamp(16px,2.2vw,22px);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-contact .ct-help-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px,2vw,19px);
  line-height:1.42;
  letter-spacing:.01em;
}

.page-contact .ct-help-desc{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:rgba(26,21,18,.78);
}

.page-contact .ct-help-link{
  margin-top:auto;
  align-self:flex-start;
  font-size:13px;
  font-weight:600;
  color:var(--zhu);
  text-decoration:none;
  border-bottom:2px solid rgba(182,46,28,.28);
  padding-bottom:2px;
}

.page-contact .ct-help-link:hover,
.page-contact .ct-help-link:focus-visible{
  border-bottom-color:var(--zhu);
}

.page-contact .ct-help-link:focus-visible{
  outline:2px solid var(--jin-dark);
  outline-offset:3px;
}

/* ---------- 联系信息 ---------- */
.page-contact .ct-info-section{
  padding-top:clamp(30px,5vw,64px);
}

.page-contact .ct-info-grid{
  display:grid;
  gap:clamp(18px,3vw,32px);
}

.page-contact .ct-info-card{
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  padding:clamp(20px,3vw,34px);
  box-shadow:8px 8px 0 -2px rgba(200,154,60,.28);
}

.page-contact .ct-info-list{
  margin:0 0 16px;
  padding:0;
  display:grid;
  gap:0;
}

.page-contact .ct-info-row{
  display:grid;
  grid-template-columns:minmax(72px,96px) minmax(0,1fr);
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--ct-hair);
  align-items:baseline;
}

.page-contact .ct-info-row:first-child{
  border-top:1px solid var(--ct-hair);
}

.page-contact .ct-info-row dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--indigo);
}

.page-contact .ct-info-row dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.55;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.page-contact .ct-info-note{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.85;
  color:rgba(26,21,18,.72);
  padding-left:12px;
  border-left:2px solid var(--jin);
}

.page-contact .ct-info-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.page-contact .ct-info-media{
  margin:0;
  align-self:start;
  border:1px solid var(--ct-hair);
  background:linear-gradient(160deg,rgba(31,58,95,.08),rgba(247,240,228,.6));
  padding:10px;
  border-radius:var(--radius);
}

.page-contact .ct-info-media img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.page-contact .ct-info-media .media-caption{
  font-size:12px;
  line-height:1.7;
  color:rgba(26,21,18,.66);
  padding:10px 2px 0;
}

/* ---------- 响应式 ---------- */
@media (min-width:640px){
  .page-contact .ct-channels{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-contact .ct-chan--paper{
    grid-column:1 / -1;
  }
  .page-contact .ct-letter-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(18px,3vw,34px);
  }
  .page-contact .ct-help-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-contact .ct-hero-grid{
    grid-template-columns:minmax(210px,.82fr) minmax(0,2.18fr);
    align-items:start;
  }

  .page-contact .ct-hero-rail{
    align-items:flex-start;
    padding-top:6px;
  }

  .page-contact .ct-title{
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:.1em;
    line-height:1.06;
  }

  .page-contact .ct-title::after{
    display:none;
  }

  .page-contact .ct-rail-note{
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:.22em;
    padding-top:4px;
  }

  .page-contact .ct-path{
    display:block;
    width:40px;
    height:auto;
  }

  .page-contact .ct-hero-media{
    max-width:100%;
  }

  .page-contact .ct-channels{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
  }

  .page-contact .ct-chan--paper{
    grid-column:auto;
    margin-top:44px;
  }

  .page-contact .ct-chan--indigo{
    margin-top:22px;
  }

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

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

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

@media (min-width:1100px){
  .page-contact .ct-hero-media{
    max-width:280px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact *{
    transition:none !important;
    animation:none !important;
  }
}
<<<END>>>