@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../fonts/AlibabaPuHuiTi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 设计基准宽度 1920px，各比例据此换算 */
  --design-width: 1920;
  --head-height: 5.365rem; /* 103px */
  --footer-height: 15.573rem; /* 299px */
  --cream: #fdf7e8;
  --footer-bg: #f6d0b1;
  --intro-color: #78553e;
  --footer-brown: #785f4f;
  --footer-light: #caa993;
}

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

html {
  /* 1rem 跟随视口宽度等比缩放，封顶为设计稿尺寸 */
  font-size: clamp(8px, calc(100vw / 100), 19.2px);
}

body {
  font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: var(--cream);
  color: var(--intro-color);
  min-height: 100vh;
}

.page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* 顶部 head 覆盖在最上层，body 在其后平铺填满主体 */
  background-image: url("../images/head.jpg"), url("../images/body.jpg");
  background-repeat: no-repeat, repeat-y;
  background-position: top center, center var(--head-height);
  background-size: 100% auto, 100% auto;
  background-color: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- 顶部 Logo ---------- */
.header {
  height: var(--head-height);
  display: flex;
  align-items: center;
  padding: 0px 0 0 11.98%; /* 距左 230/1920 */
}

.logo {
  width: 6.82rem; /* 131px */
  height: auto;
  display: block;
}

/* ---------- 主体 ---------- */
.main {
  flex: 1;
}

/* ---------- 轮播 ---------- */
.carousel {
  position: relative;
  width: 76.04%;          /* 1460/1920 */
  margin: 0.5rem auto 0;  /* 居中，左右各 230px */
}

.carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1460 / 570;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.6rem 1.6rem rgba(120, 85, 62, 0.18);
}

.carousel__track {
  list-style: none;
  width: 100%;
  height: 100%;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
  z-index: 1;
}

.carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}

.carousel__slide.is-prev {
  opacity: 1;
  z-index: 2;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.34rem;  /* 45px */
  height: 2.34rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.carousel__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.carousel__arrow:hover {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.2));
}

.carousel__arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* 箭头距页边 139px -> 距轮播边 (139 - 230) 为负，即叠在轮播外侧偏内 */
.carousel__arrow--prev {
  left: calc(-1 * (230px - 139px) / var(--design-width) * 100vw);
  left: -4.74rem; /* (230-139)=91px 在轮播左侧外侧 */
}

.carousel__arrow--next {
  right: -4.74rem;
}

/* ---------- 简介 ---------- */
.intro {
  padding: 3.13rem 19.01% 0; /* 上 60px，左右各 365/1920 */
}

.intro__text {
  color: var(--intro-color);
  font-size: 1.146rem; /* 22px */
  line-height: 2;
  text-align: justify;
  text-align-last: start;
}

/* ---------- 下载按钮 ---------- */
.download {
  text-align: center;
  padding-top: 3.39rem; /* 65px */
}

.download__btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.download__btn img {
  width: 19.22rem; /* 369px */
  height: auto;
  display: block;
}

.download__btn:hover {
  transform: translateY(-0.15rem);
  filter: drop-shadow(0 0.3rem 0.5rem rgba(0, 0, 0, 0.2));
}

.download__btn:active {
  transform: scale(0.97);
}

.download__tip {
  margin-top: 1.04rem; /* 20px */
  color: #878787;
  font-size: 1.315rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ---------- 页脚 ---------- */
.footer {
  margin-top: 3.13rem; /* 60px */
  background-color: var(--footer-bg);
  background-image: url("../images/foot.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  text-align: center;
  padding: 2.8rem 6% 1.36rem; /* 顶 55px */
}

.footer__line {
  line-height: 2.1;
}

.footer__line--brown {
  color: var(--footer-brown);
  font-size: 1.146rem; /* 22px */
}

.footer__links {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.footer__link,
.footer__link:visited,
.footer__link:hover,
.footer__link:active {
  color: var(--footer-brown);
  text-decoration: none;
}

.footer__link + .footer__link::before {
  content: "|";
  margin: 0 0.6em;
  color: var(--footer-brown);
}

.footer__line--light {
  position: relative;
  color: var(--footer-light);
  font-size: 1.04rem; /* 20px */
  margin-top: 2.08rem; /* 40px */
  padding-top: 1.04rem; /* 20px */
}

.footer__line--light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw - 460px);
  max-width: 1460px;
  height: 1px;
  background-color: var(--footer-light);
  transform: translateX(-50%);
}

.footer__copyright {
  margin-top: 0.6rem;
}

.footer__sep {
  display: inline-block;
  width: 1rem;
}

/* ---------- 窄屏适配 ---------- */
@media (max-width: 900px) {
  :root {
    --head-height: calc(103 / 1920 * 100vw);
  }

  html {
    font-size: clamp(9px, calc(100vw / 60), 16px);
  }

  .header {
    padding-left: 5%;
    text-align: center;
  }

  .logo {
    width: calc(131 / 1920 * 100vw);
  }

  .carousel {
    width: 88%;
  }

  .carousel__arrow {
    width: 2.6rem;
    height: 2.6rem;
  }

  .carousel__arrow--prev {
    left: 0.4rem;
  }

  .carousel__arrow--next {
    right: 0.4rem;
  }

  .intro {
    padding-left: 6%;
    padding-right: 6%;
  }

  .intro__text {
    text-align-last: left;
  }

  .footer__sep {
    width: 1rem;
  }

  .footer__line--light::before {
    width: 88%;
  }
}

@media (min-width: 901px) {
  .carousel {
    margin: 2.083rem auto 0; /* 143px from page top, 230px side gutters */
  }

  .footer {
    min-height: var(--footer-height);
    height: auto;
  }
}