/* DEWA4D — Dinding Tenun 瀑布流 masonry (PFX=d4) · #291E24 织机梅棕 / #FFD3B5 丝线暖粉
   Fonts: Young Serif + Work Sans · 母题: 经线卷轴格 / 布纹墙卡 / 工艺格卷轴窗 / 暖粉光效 */

:root {
  --d4-bg: #291E24;
  --d4-bg-deep: #1F161B;
  --d4-card: #322430;
  --d4-card2: #3A2C36;
  --d4-line: #4A3742;
  --d4-ac: #FFD3B5;
  --d4-ac-deep: #E8A87C;
  --d4-wood: #F2A15F;
  --d4-weft: #E8C5A0;
  --d4-tx: #F7EFE9;
  --d4-tx-dim: #D8C8C2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--d4-bg);
  color: var(--d4-tx);
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--d4-ac); text-decoration: none; }
a:hover { color: var(--d4-weft); }

h1, h2, h3, .d4-cl-t, .d4-logo-word { font-family: "Young Serif", Georgia, serif; font-weight: 400; line-height: 1.28; }

/* ---------- header ---------- */

.d4-head {
  background: linear-gradient(180deg, var(--d4-bg-deep), rgba(31, 22, 27, 0.92));
  border-bottom: 1px solid var(--d4-line);
  position: relative; z-index: 60;
}

.d4-headin { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; gap: 26px; }

.d4-logo { display: inline-flex; align-items: center; gap: 12px; }

.d4-logo-win {
  display: inline-flex; gap: 5px; padding: 7px 11px;
  border: 2px solid var(--d4-ac); border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 211, 181, 0.12) 0 2px, transparent 2px 7px),
    #241A20;
  box-shadow: 0 0 14px rgba(255, 211, 181, 0.3);
  font-style: normal; font-size: 13px; color: var(--d4-ac);
}

.d4-logo-word { font-size: 24px; letter-spacing: 2.5px; color: var(--d4-tx); }

.d4-nav { margin-left: auto; display: flex; gap: 22px; }
.d4-nav a { color: var(--d4-tx-dim); font-weight: 500; letter-spacing: 0.4px; }
.d4-nav a:hover, .d4-nav a.d4-on { color: var(--d4-ac); }

.d4-hact { display: flex; gap: 10px; }

.d4-btn {
  display: inline-block; padding: 9px 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.5px;
  border: 1.6px solid transparent; cursor: pointer; font-family: inherit;
}
.d4-btn-main {
  background: linear-gradient(180deg, var(--d4-ac), var(--d4-ac-deep));
  color: #33222B; border-color: var(--d4-weft);
  box-shadow: 0 0 18px rgba(255, 211, 181, 0.38);
}
.d4-btn-main:hover { color: #201519; filter: brightness(1.06); }
.d4-btn-ghost { border-color: var(--d4-wood); color: var(--d4-tx); background: rgba(242, 161, 95, 0.08); }
.d4-btn-ghost:hover { border-color: var(--d4-ac); color: var(--d4-ac); }

/* burger */
.d4-burger { display: none; margin-left: auto; cursor: pointer; }
.d4-burger span { display: block; width: 24px; height: 2.5px; margin: 5px 0; background: var(--d4-ac); border-radius: 2px; }
.d4-navtog { display: none; }
.d4-mnav { display: none; padding: 6px 22px 18px; border-top: 1px dashed var(--d4-line); background: var(--d4-bg-deep); }
.d4-mgrp h3 { color: var(--d4-wood); font-family: "Work Sans", sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 14px 0 4px; }
.d4-mgrp a { display: block; padding: 6px 0; color: var(--d4-tx-dim); }
.d4-navtog:checked ~ .d4-mnav { display: block; }

/* ---------- 织机檐 hero ---------- */

.d4-main { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.d4-loom { position: relative; padding: 42px 0 30px; }

.d4-eave {
  position: relative; height: 26px; border-radius: 8px;
  background: linear-gradient(180deg, #3E2E39, #241A20);
  border: 1px solid var(--d4-line); border-bottom: 2px solid var(--d4-wood);
  box-shadow: 0 8px 22px rgba(15, 9, 12, 0.55);
  overflow: hidden;
}
.d4-shuttle {
  position: absolute; top: 4px; left: -80px; width: 64px; height: 14px;
  background: linear-gradient(90deg, #7A5340, var(--d4-wood) 45%, #C98B4B);
  border-radius: 999px; box-shadow: 0 0 12px rgba(242, 161, 95, 0.55);
  animation: d4-pass 9s linear infinite;
}
@keyframes d4-pass {
  0% { left: -80px; }
  100% { left: 100%; }
}

.d4-warps {
  display: flex; justify-content: space-between; padding: 0 8%;
  height: 96px; position: relative;
}
.d4-warps i {
  flex: 1; margin: 0 3.5%;
  background: linear-gradient(180deg, var(--d4-ac-deep), rgba(232, 197, 160, 0.14));
  width: 2px; min-width: 2px;
  box-shadow: 0 0 8px rgba(255, 211, 181, 0.28);
}
.d4-warps::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 44%;
  border-top: 2px dashed rgba(255, 211, 181, 0.5);
}

.d4-herobox { position: relative; max-width: 880px; margin-top: -46px; }

.d4-kicker {
  display: inline-block; font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--d4-ac); border: 1px solid var(--d4-ac-deep); border-radius: 999px;
  padding: 5px 16px; background: rgba(41, 30, 36, 0.9);
}

.d4-herobox h1 { font-size: clamp(32px, 4.8vw, 54px); margin: 18px 0 14px; color: var(--d4-tx); }

.d4-herop {
  color: var(--d4-tx-dim); font-size: 17.5px; background: rgba(31, 22, 27, 0.82);
  padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(74, 55, 66, 0.8);
}

.d4-heroact { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 6px; }

.d4-paynote {
  margin-top: 20px; text-align: center; color: var(--d4-ac);
  letter-spacing: 6px; font-size: 15px; opacity: 0.85;
  text-shadow: 0 0 12px rgba(255, 211, 181, 0.5);
}

/* ---------- masonry 布纹墙 ---------- */

.d4-wallsec { padding: 44px 0 8px; }
.d4-wallsec h2, .d4-craftsec h2, .d4-about h2, .d4-adv h2, .d4-picks h2, .d4-faqsec h2, .d4-trust h2 {
  font-size: 31px; color: var(--d4-ac); margin-bottom: 8px;
}
.d4-wallp { color: var(--d4-tx-dim); max-width: 720px; margin-bottom: 24px; }

.d4-wall { columns: 3 320px; column-gap: 20px; }

.d4-cl {
  position: relative; break-inside: avoid; margin: 0 0 20px;
  border: 1.4px solid var(--d4-line); border-radius: 6px 18px 6px 18px;
  padding: 22px 20px 20px;
  background:
    repeating-linear-gradient(180deg, rgba(232, 197, 160, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, var(--d4-card), var(--d4-bg-deep));
}
.d4-cl dd { margin: 0; }
.d4-cl-0 { min-height: 250px; }
.d4-cl-1 { min-height: 300px; }
.d4-cl-2 { min-height: 230px; }
.d4-cl-3 { min-height: 275px; }

.d4-cl-mark {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 10px;
  background: linear-gradient(90deg, #7A5340, var(--d4-wood));
  border-radius: 999px; box-shadow: 0 0 8px rgba(242, 161, 95, 0.5);
}

.d4-cl-no { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--d4-wood); margin-bottom: 6px; font-weight: 500; }
.d4-cl-t { font-family: "Young Serif", Georgia, serif; font-size: 22px; margin-bottom: 8px; }
.d4-cl-t a { color: var(--d4-tx); }
.d4-cl-t a:hover { color: var(--d4-ac); }
.d4-cl-d { font-size: 14.5px; color: var(--d4-tx-dim); }
.d4-cl-lnk { margin-top: 10px; }
.d4-cl-lnk a { display: inline-block; font-size: 14px; font-weight: 600; }

/* ---------- 工艺格 ---------- */

.d4-craftsec { padding: 36px 0 8px; }
.d4-craftsp { color: var(--d4-tx-dim); max-width: 760px; margin-bottom: 22px; }

.d4-crafts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.d4-cell {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
  margin: 0; border: 1.4px solid var(--d4-line); border-radius: 14px; padding: 18px;
  background: linear-gradient(180deg, var(--d4-card2), var(--d4-bg-deep));
}

.d4-cellwin {
  display: block; border: 2px solid var(--d4-line); border-radius: 10px; padding: 6px 0; text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(255, 211, 181, 0.1) 0 2px, transparent 2px 6px),
    #241A20;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 211, 181, 0.22);
}
.d4-cellwin b { display: block; font-weight: 400; font-size: 17px; color: var(--d4-ac); padding: 5px 0; text-shadow: 0 0 10px rgba(255, 211, 181, 0.5); }

.d4-celltx h3 { font-size: 19px; color: var(--d4-tx); margin-bottom: 6px; }
.d4-celltx p { font-size: 14.5px; color: var(--d4-tx-dim); margin-bottom: 6px; }

/* ---------- 叙述 / 优势 / 精选 / FAQ / 信任 ---------- */

.d4-about { padding: 40px 0 8px; }
.d4-about p { color: var(--d4-tx-dim); max-width: 860px; margin-bottom: 14px; }

.d4-aboutfig { margin: 24px 0 8px; }
.d4-aboutfig img { border-radius: 16px; border: 1px solid var(--d4-line); box-shadow: 0 18px 44px rgba(12, 7, 10, 0.55); }
.d4-aboutfig figcaption, .d4-fig figcaption { font-size: 13.5px; color: var(--d4-tx-dim); padding-top: 8px; font-style: italic; }

.d4-adv { padding: 34px 0 6px; }
.d4-advlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.d4-advrow {
  border: 1px solid var(--d4-line); border-radius: 14px; padding: 18px 20px;
  background: linear-gradient(180deg, rgba(58, 44, 54, 0.6), rgba(31, 22, 27, 0.6));
}
.d4-advrow dt { color: var(--d4-ac); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.d4-advrow dd { margin: 0; font-size: 15px; color: var(--d4-tx-dim); }

.d4-picks { padding: 34px 0 6px; }
.d4-pickgrid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; }
.d4-pick {
  display: flex; flex-direction: column; gap: 8px;
  border: 1.4px solid var(--d4-line); border-radius: 6px 18px 6px 18px; padding: 20px;
  background: var(--d4-bg-deep); border-top: 3px solid var(--d4-ac);
}
.d4-pick h3 { font-size: 20px; }
.d4-pick h3 a { color: var(--d4-tx); }
.d4-pick h3 a:hover { color: var(--d4-ac); }
.d4-pick p { font-size: 14.5px; color: var(--d4-tx-dim); flex: 1; }
.d4-pickmore { font-size: 14px; font-weight: 600; }

.d4-faqsec { padding: 34px 0 6px; }
.d4-q {
  border: 1px solid var(--d4-line); border-radius: 12px; margin-bottom: 10px;
  background: rgba(31, 22, 27, 0.68); overflow: hidden;
}
.d4-q summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--d4-tx);
  list-style: none; position: relative; padding-right: 40px;
}
.d4-q summary::before { content: "🧵"; position: absolute; right: 15px; top: 13px; font-size: 14px; opacity: 0.9; }
.d4-q summary::-webkit-details-marker { display: none; }
.d4-q[open] summary { border-bottom: 1px dashed var(--d4-line); color: var(--d4-ac); }
.d4-q p { padding: 12px 18px 16px; color: var(--d4-tx-dim); font-size: 15.5px; }

.d4-trust {
  margin: 38px 0 120px; border: 1.4px solid var(--d4-ac-deep); border-radius: 18px;
  padding: 26px 28px;
  background:
    radial-gradient(90% 140% at 85% 0%, rgba(255, 211, 181, 0.12), transparent 60%),
    var(--d4-bg-deep);
}
.d4-trust p { color: var(--d4-tx-dim); max-width: 880px; }
.d4-trustlnk { display: inline-block; margin-top: 12px; font-weight: 600; }

/* ---------- 内页 ---------- */

.d4-ribbon {
  display: flex; justify-content: center; gap: 26px; padding: 10px 0;
  border-bottom: 1px dashed var(--d4-line); color: var(--d4-ac);
  font-size: 17px; letter-spacing: 4px; text-shadow: 0 0 12px rgba(255, 211, 181, 0.5);
  background: rgba(31, 22, 27, 0.55);
}

.d4-paper { max-width: 900px; margin: 0 auto; padding: 30px 22px 120px; }

.d4-crumbs { font-size: 13.5px; color: var(--d4-tx-dim); margin-bottom: 18px; }
.d4-crumbs a { color: var(--d4-wood); }
.d4-crumbs a:hover { color: var(--d4-ac); }

.d4-navpage h1, .d4-edu h1 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 14px; color: var(--d4-tx); }
.d4-navintro, .d4-edulead { font-size: 17.5px; color: var(--d4-tx-dim); margin-bottom: 20px; }

.d4-navpage h2, .d4-edu h2 { font-size: 24px; color: var(--d4-ac); margin: 26px 0 10px; }
.d4-navpage p, .d4-edu > p { color: var(--d4-tx-dim); margin-bottom: 12px; }

.d4-steps { list-style: none; counter-reset: d4step; display: grid; gap: 12px; }
.d4-steps li {
  counter-increment: d4step; position: relative; padding: 16px 18px 16px 62px;
  border: 1px solid var(--d4-line); border-radius: 14px; background: rgba(31, 22, 27, 0.62);
}
.d4-steps li::before {
  content: counter(d4step);
  position: absolute; left: 16px; top: 17px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--d4-ac), var(--d4-ac-deep));
  color: #33222B; font-weight: 700; font-size: 15px;
  box-shadow: 0 0 12px rgba(255, 211, 181, 0.4);
}
.d4-steps h3 { font-family: "Work Sans", sans-serif; font-weight: 700; font-size: 16.5px; color: var(--d4-tx); margin-bottom: 3px; }
.d4-steps p { font-size: 15px; }

.d4-navlist { list-style: none; display: grid; gap: 8px; margin-bottom: 8px; }
.d4-navlist li { padding-left: 26px; position: relative; color: var(--d4-tx-dim); font-size: 15.5px; }
.d4-navlist li::before { content: "🧶"; position: absolute; left: 2px; top: 3px; font-size: 12px; opacity: 0.85; }

.d4-note {
  border-left: 3px solid var(--d4-ac); background: rgba(255, 211, 181, 0.07);
  padding: 12px 16px; border-radius: 0 12px 12px 0; color: var(--d4-tx-dim); font-size: 15px;
  margin: 18px 0;
}

.d4-fig { margin: 22px 0; }
.d4-fig img { border-radius: 14px; border: 1px solid var(--d4-line); }
.d4-fig-lead { margin: 6px 0 22px; }

.d4-navaside {
  margin-top: 28px; border: 1px dashed var(--d4-line); border-radius: 14px;
  padding: 16px 20px; background: rgba(58, 44, 54, 0.32);
  display: grid; gap: 6px;
}
.d4-navaside h3 {
  font-family: "Work Sans", sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--d4-wood); margin: 10px 0 2px; font-weight: 700;
}
.d4-navaside a { color: var(--d4-tx-dim); font-size: 15px; }
.d4-navaside a:hover { color: var(--d4-ac); }

.d4-resp { margin-top: 26px; font-size: 13.5px; color: var(--d4-tx-dim); border-top: 1px dashed var(--d4-line); padding-top: 14px; }

/* ---------- 404 ---------- */

.d4-404body { background: var(--d4-bg-deep); }
.d4-404 { max-width: 720px; margin: 0 auto; padding: 70px 22px 120px; text-align: center; }
.d4-404win {
  display: inline-flex; gap: 18px; padding: 16px 26px; margin-bottom: 20px;
  border: 2px solid var(--d4-line); border-radius: 12px; font-size: 30px; color: var(--d4-ac);
  background: #241A20; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.6);
}
.d4-404 h1 { font-size: 34px; margin-bottom: 12px; }
.d4-404 p { color: var(--d4-tx-dim); margin-bottom: 24px; }
.d4-404act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- footer ---------- */

.d4-foot { border-top: 2px solid var(--d4-line); background: var(--d4-bg-deep); }
.d4-fgrid { max-width: 1180px; margin: 0 auto; padding: 40px 22px 10px; display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr; gap: 28px; }
.d4-fbrand p { color: var(--d4-tx-dim); font-size: 14.5px; margin: 12px 0; max-width: 320px; }
.d4-18 {
  display: inline-block; border: 2px solid var(--d4-ac); color: var(--d4-ac);
  border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px;
}
.d4-fcol h3 { font-family: "Work Sans", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--d4-wood); margin-bottom: 10px; }
.d4-fcol a { display: block; color: var(--d4-tx-dim); font-size: 14.5px; padding: 3.5px 0; }
.d4-fbot { max-width: 1180px; margin: 0 auto; padding: 16px 22px 26px; border-top: 1px dashed var(--d4-line); color: var(--d4-tx-dim); font-size: 13.5px; }

/* ---------- 底部悬浮条（唯一外链白名单） ---------- */

.d4-float {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; justify-content: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(31, 22, 27, 0.1), rgba(24, 16, 20, 0.95) 40%);
  pointer-events: none;
}
.d4-floatin {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  border: 1.4px solid var(--d4-ac-deep); border-radius: 999px;
  background: rgba(24, 16, 20, 0.97); padding: 7px 8px 7px 18px;
  box-shadow: 0 0 26px rgba(255, 211, 181, 0.28);
  pointer-events: auto; max-width: 96vw;
}
.d4-jptag { font-size: 13.5px; color: var(--d4-tx-dim); letter-spacing: 0.5px; }
.d4-jptag b { font-style: normal; }
.d4-blink { font-style: normal; color: var(--d4-ac); animation: d4-pulse 1.5s ease-in-out infinite; }
.d4-enter { padding: 9px 24px; }

@keyframes d4-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1024px) {
  .d4-pickgrid { grid-template-columns: 1fr 1fr; }
  .d4-fgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .d4-nav, .d4-hact { display: none; }
  .d4-burger { display: inline-block; }
  .d4-crafts { grid-template-columns: 1fr; }
  .d4-advlist { grid-template-columns: 1fr; }
  .d4-warps { height: 74px; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .d4-pickgrid { grid-template-columns: 1fr; }
  .d4-fgrid { grid-template-columns: 1fr; padding-top: 28px; }
  .d4-heroact .d4-btn { width: 100%; text-align: center; }
  .d4-jptag { display: none; }
  .d4-floatin { padding-left: 8px; }
  .d4-herop { padding: 14px 16px; }
  .d4-cell { grid-template-columns: 52px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .d4-shuttle, .d4-blink { animation: none; }
}