@font-face {
  font-family: "Abuget";
  src: url("../fonts/Abuget.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IvyMode-Regular";
  src: url("../fonts/IvyMode/IvyMode-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "IvyMode-Light";
  src: url("../fonts/IvyMode/IvyMode-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "IvyOraText-Medium";
  src: url("../fonts/IvyOraText/IvyOraText-Medium.ttf") format("truetype");
  font-weight: 500;
}

:root {
  --hover-scale: 1.04;
  --hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 🌸 Hero Section */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1680 / 1052;
  height: 70vh;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.35) 78%,
      rgba(0, 0, 0, 0.75) 100%
    ),
    var(--hero);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 55% 75%;
  overflow: hidden;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* 文字容器 */
.hero-text {
  position: absolute;
  left: 7.9%;
  bottom: 4.7%;
  z-index: 1;
  color: #fff;
  text-align: left;
}

.hero-title {
  font-family: "Abuget", cursive;
  font-weight: 400;
  font-size: clamp(40px, 9vw, 180px); /* 响应式字号 */
  line-height: 1;
  margin: 0 0 -10px 0; /* ↔️ 调这里控制两行间距 */
}

.hero-subtitle {
  font-family: "IvyMode", serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 80px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* 10% */
  margin: 0;
}

/* 📱 响应式微调 */
@media (max-width: 768px) {
  .hero {
    aspect-ratio: auto;
    height: 60vh;
    background-size: cover;
    background-position: 55% 75%;
  }
  .hero-text {
    left: 8%;
    bottom: 8%;
  }
  .hero-title {
    font-size: 60px;
  }
  .hero-subtitle {
    font-size: 30px;
  }
}

/* 🌿 About Section */
.about {
  background-color: #eee9e2;
  color: #2f2f2f;
  text-align: center;
  padding: 120px 20px;
}

.about-container {
  max-width: 900px;
  margin: 0 auto;
}

/* ✨ 标题部分 */
.about-title {
  font-family: "Abuget", cursive;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 120px); /* 响应式字号更平滑 */
  line-height: 1;
  margin: 0; /* 去掉默认间距 */
  color: #626657;
}

.about-subtitle {
  font-family: "IvyMode-Light", serif;
  font-size: clamp(24px, 3vw, 48px);
  color: #272a2c;
  margin-top: 8px; /* 🔥 标题与副标题更紧凑 */
  margin-bottom: 24px; /* 🔥 副标题与正文留白 */
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.1em; /* 使用em更自然 */
}

/* 📜 正文 */
.about-text {
  font-family: "IvyOraText-Medium", serif;
  margin: 0 auto;
  max-width: 720px;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 20px); /* 响应式字号更自然 */
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
  color: #272a2c;
}

/* 📱 响应式微调 */
@media (max-width: 768px) {
  .about {
    padding: 80px 16px;
  }

  .about-title {
    margin-bottom: 4px;
  }

  .about-subtitle {
    margin-bottom: 16px;
  }
}

/* 🌿 Jewelry Section */
.jewelry {
  background: #626657;
  color: #eee9e2;
  padding: 100px min(8vw, 80px);
}

/* 头部两列：左标题组 + 右段落 */
.jewelry-head {
  display: grid;
  grid-template-columns: clamp(220px, 24vw, 340px) 1fr; /* 左窄右宽 */
  column-gap: min(6vw, 64px);
  /* 不要整体 center，只让右侧自己居中 */
  align-items: start;
  margin-bottom: 48px;
}

/* 左块：标题两行 */
.jewelry-title {
  font-family: "Abuget", cursive;
  font-size: clamp(48px, 6.6vw, 100px);
  line-height: 1;
  margin: 0 0 6px 0;
  font-weight: 100;
}

.jewelry-subtitle {
  font-family: "IvyMode-Light", serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.15;
  margin: -25px;
  font-weight: 200;
}

/* 右块段落：相对左块垂直居中 */
.jewelry-description {
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(18px, 1.2vw, 20px);
  line-height: 1.6;
  color: #eee9e2;
  max-width: 100ch;
  margin: 0;
}

.j-head-left {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center;
}

.j-head-right {
  align-self: center;
} /* ⭐ 只让右侧在网格里垂直居中 */

/* 卡片三列 */
.jewelry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* 统一图片比例与裁切 */
.card-image {
  width: 100%;
  aspect-ratio: 6 / 5; /* 统一横幅比例，更贴近稿子 */
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.card {
  text-align: center;
}
.card-title {
  font-family: "IvyMode-Regular", serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(18px, 1.8vw, 24px);
  margin: 6px 0 10px;
  font-weight: 100;
}
.card-description {
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  color: #eee9e2;
  max-width: 36ch;
  margin: 0 auto;
  font-weight: 100;
}

/* 响应式 */
@media (max-width: 640px) {
  .jewelry {
    padding: 72px 6% 80px;
  }

  .jewelry-head {
    grid-template-columns: 1fr;
    row-gap: 24px;
    text-align: center;
  }

  .j-head-left {
    margin-bottom: 12px;
  }

  .jewelry-title {
    font-size: clamp(36px, 10vw, 60px);
  }

  .jewelry-subtitle {
    font-size: clamp(18px, 5vw, 28px);
    margin: -10px 0 10px;
    letter-spacing: 0.08em;
  }

  .jewelry-description {
    font-size: 16px;
    line-height: 1.9;
    max-width: 90%;
    margin: 0 auto;
  }

  /* 卡片区 */
  .jewelry-cards {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
  }

  .card-image {
    aspect-ratio: 5 / 4;
    border-radius: 6px;
    margin-bottom: 14px;
  }

  .card-title {
    font-size: clamp(16px, 4.5vw, 20px);
    margin-bottom: 6px;
  }

  .card-description {
    font-size: 15px;
    line-height: 1.8;
    max-width: 90%;
    margin: 0 auto;
  }
}

/* 🌿 Ornament Section */
.ornament-list {
  display: flex;
  flex-direction: column;
}

/* 每一块 Ornament */
.orn {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* 文字内容 */
.orn-text {
  position: relative;
  z-index: 2;
  max-width: 45%;
  padding-left: 8%;
}

.orn-title {
  font-family: "Abuget", cursive;
  font-size: clamp(48px, 6vw, 120px);
  margin: 0 0 8px 0;
  line-height: 1;
  font-weight: 100;
}

.orn-subtitle {
  font-family: "IvyMode-Light", serif;
  font-size: clamp(32px, 3vw, 72px);
  margin: -24px 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100;
}

.orn-desc {
  width: 20vw;
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.6;
  margin: 6px 0 16px 0;
  color: #ddd;
  font-weight: 100;
}

/* 🔁 偶数项反向布局 */
.orn.reverse {
  justify-content: flex-end;
  text-align: right;
}

.orn.reverse .orn-text {
  padding-left: 0;
  padding-right: 8%;
  text-align: right;
}

/* 📱 响应式：上下堆叠 */
/* 📱 响应式：上下堆叠 */
@media (max-width: 768px) {
  .orn {
    flex-direction: column;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6vh 0; /* ✅ 上下留白更自然 */
  }

  .orn.reverse {
    justify-content: center;
  }

  .orn-text {
    max-width: 90%;
    padding: 0 5vw; /* ✅ 两边留空，避免贴边 */
    margin-top: 4vh;
    text-align: center !important;
  }

  .orn-title {
    font-size: clamp(42px, 10vw, 72px); /* ✅ 适配手机屏宽 */
    margin-bottom: 4px;
  }

  .orn-subtitle {
    font-size: clamp(22px, 5vw, 36px);
    margin: -12px 0 8px 0;
    letter-spacing: 0.08em;
  }

  .orn-desc {
    width: 100%; /* ✅ 不再限制固定宽度 */
    max-width: 600px;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.8;
    margin: 12px auto 0 auto;
    color: #f1f1f1;
  }
}

/* 🌸 FAQ Section */
.faq {
  background: #e6dac9;
  color: #272a2c;
}

/* 外层容器：左右留白按比例，整体居中 */
.faq-inner {
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 6vw 0; /* 上下比例留白 */
}

/* ✅ 两栏布局：左 35%，右 65%，中间自动间距 */
.faq-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: start;
  justify-content: center;
  column-gap: 4%; /* 保持比例间距 */
}

/* 左栏 */
.faq-left-inner {
  text-align: left;
  max-width: 360px; /* 限制文字行长更好看 */
}

/* 左侧标题 */
.faq-label {
  font-family: "Abuget", cursive;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 96px);
  line-height: 1;
  color: #626657;
  margin: 0 0 8px 0;
  font-weight: 100;
}

.faq-subtitle {
  margin: 0 0 20px 0;
  font-family: "IvyMode-Light", serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(26px, 2.4vw, 46px);
  line-height: 1.05;
  font-weight: 100;
}

.faq-intro {
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: #272a2c;
}

/* ✅ 右栏 FAQ 列表 */
.faq-list {
  position: relative;
}

/* ❌ 移除顶部横线 */
.faq-list::before {
  content: none;
}

/* 每个 FAQ item */
.faq-list details {
  border-top: 1px solid rgba(39, 42, 44, 0.35);
  padding: 20px 0;
}

/* ❗ 第一条不画横线 */
.faq-list details:first-of-type {
  border-top: none;
}

/* summary 样式 */
.faq-list summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 36px;
  font-family: "IvyMode-Regular", serif;
  font-size: clamp(20px, 2vw, 24px);
  color: #272a2c;
  transition: color 0.3s ease, transform 0.3s ease;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}

/* + 号 */
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 24px;
  color: #626657;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

/* summary 整体 hover 时颜色微亮 */
.faq-list summary:hover {
  color: #626657;
  transform: translateX(4px);
}

/* 展开时加淡色背景 */
.faq-list details[open] {
  background: rgba(221, 194, 169, 0.15);
  border-radius: 8px;
  padding: 24px;
  transition: background 0.4s ease;
}

/* 答案 */
.faq-answer {
  margin-top: 12px;
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: #272a2c;
}

/* 📱 响应式：小屏上下堆叠 */
@media (max-width: 1024px) {
  .faq-inner {
    width: 92%;
    padding: 10vw 0;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .faq-left-inner {
    max-width: 100%;
  }
}

/* 🌸 Contact Section */
.contact {
  position: relative;
  width: 100%;
  height: 75vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #f5f1ed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* ✅ 阴影层 */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 放在背景之上、文字之下 */
  background: linear-gradient(
    180deg,
    rgba(39, 42, 44, 0.75) 0%,
    rgba(39, 42, 44, 0.5) 25%,
    rgba(221, 194, 169, 0.25) 60%,
    rgba(238, 233, 226, 0.05) 100%
  );
  /* ❌ 去掉 mix-blend-mode，这层只负责暗化 */
}

/* ✅ 文字内容层 */
.contact-text {
  position: relative;
  z-index: 2; /* 高于阴影 */
  max-width: 800px;
  padding: 0 20px;
  text-align: center;
}

/* ✅ 确保文字亮度 */
.contact-title,
.contact-subtitle,
.contact-description {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 提高对比度 */
  color: #f5f1ed;
}

/* ✅ 按钮也提亮 */
.contact-btn {
  color: #272a2c;
  background: #ddc2a9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.contact-title {
  font-family: "Abuget", cursive;
  font-size: clamp(100px, 10vw, 120px);
  font-weight: 100;
  margin: 0 0 12px 0;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.contact-subtitle {
  font-family: "IvyMode-Light", serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  margin: -35px 0 24px 0;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* 📜 Description：正文 */
.contact-description {
  font-family: "IvyOraText-Medium", serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: #eee9e2;
  max-width: 600px;
  margin: 0 auto 32px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* 🔘 按钮区域 */
.contact-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* 🌿 按钮样式 */
.contact-btn {
  text-decoration: none;
  display: inline-block;
  padding: 12px 32px;
  font-family: "IvyMode-Regular", serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: #272a2c;
  background: #ddc2a9;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.contact-btn:hover {
  background: #ddc2a9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* 💻 平板端微调 */
@media (max-width: 1024px) {
  .contact-overlay {
    padding: 60px 24px;
  }
  .contact-subtitle {
    font-size: clamp(28px, 5vw, 56px);
  }
  .contact-title {
    font-size: clamp(24px, 3.5vw, 48px);
  }
  .contact-description {
    font-size: 15px;
  }
}

/* 📱 手机端优化 */
@media (max-width: 768px) {
  .contact {
    height: auto;
    min-height: 520px; /* 保证竖屏时空间足够 */
    padding: 64px 0 80px 0; /* 上下留白 */
    background-position: center 45%;
  }

  /* 📱 阴影稍浅，防止压暗画面 */
  .contact::before {
    background: linear-gradient(
      180deg,
      rgba(39, 42, 44, 0.65) 0%,
      /* 顶部轻暗 */ rgba(39, 42, 44, 0.4) 25%,
      /* 中部柔和 */ rgba(221, 194, 169, 0.2) 70%,
      /* 暖色透出 */ rgba(238, 233, 226, 0) 100% /* 底部通透 */
    );
  }

  .contact-text {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px; /* 均匀间距 */
  }

  .contact-subtitle {
    font-size: 28px;
    margin: 0;
  }

  .contact-title {
    font-size: 48px;
    letter-spacing: 0.06em;
    margin: 4px 0 8px 0;
    line-height: 1.1;
  }

  .contact-description {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 320px;
  }

  .contact-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .contact-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 0;
    font-size: 15px;
    background: #ddc2a9;
    border-radius: 6px;
    color: #272a2c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
  }

  .contact-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
}

/* 💬 WeChat Modal 弹窗 */
.wechat-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ✅ 弹窗主体：正方形，整体居中 */
.wechat-modal-content {
  position: relative;
  background-color: #ddc2a9;
  margin: 10% auto;
  border-radius: 16px;
  width: 90vw; /* 用视口宽度单位更自然 */
  max-width: 520px; /* 最大宽度 520px */
  aspect-ratio: 1 / 1; /* 强制正方形 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  padding: 40px;
  text-align: center;
  color: #272a2c;
  animation: modalIn 0.3s ease-out; /* ✨ 弹入动画 */
}

/* ✅ 二维码图像 */
.wechat-modal-content img {
  width: 80%;
  max-width: 400px; /* 图片最大 360px */
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  margin-bottom: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ✅ 文字 */
.wechat-modal-content p {
  font-family: "IvyOraText-Medium", serif;
  font-size: 18px;
  line-height: 1.5;
  color: #272a2c;
  margin: 0;
}

/* ✅ 关闭按钮 */
.wechat-close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 28px;
  color: #272a2c;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.wechat-close:hover {
  transform: scale(1.2);
  color: #626657;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ✅ 弹入动画 */
@keyframes modalIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 📱 响应式优化：小屏依然正方，自动缩放 */
@media (max-width: 768px) {
  .wechat-modal-content {
    max-width: 400px;
    padding: 24px;
  }
  .wechat-modal-content img {
    max-width: 260px;
  }
  .wechat-modal-content p {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .wechat-modal-content {
    max-width: 320px;
    padding: 20px;
  }
  .wechat-modal-content img {
    max-width: 220px;
  }
}