html { font-size: 0.78125vw; }
* { box-sizing: border-box; }
body { margin: 0; background: #D5D7DD; color: rgba(16, 61, 100, 0.59); font-family: "Microsoft YaHei", Arial, sans-serif; }
svg { display: block; }
header, main, footer { width: 100%; }
header { height: 61rem; color: #FFFFFF; text-align: center; position: relative; }
.banner { position: absolute; width: 100%; height: 100%; }
nav { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 1.5rem 2.8rem; text-align: right; font-size: 1.5rem; }
nav a { color: #FFFFFF; text-decoration: none; margin-left: 1.5rem; }
header h1 { position: relative; margin: 0; padding-top: 30rem; font-size: 3.8rem; font-weight: normal; letter-spacing: 0.3rem; }
header p { position: relative; font-size: 2.6rem; line-height: 1.5; margin: 1.8rem 0; }
section { text-align: center; padding: 5.5rem 3.5rem; }
h2 { font-size: 3.9rem; font-weight: normal; margin: 1.5rem 0; }
h3 { font-size: 2.9rem; font-weight: normal; margin: 1.8rem 0; }
p { font-size: 2.8rem; line-height: 1.35; }
hr { border: 0; border-top: 0.3rem solid rgba(16, 61, 100, 0.59); width: 85%; margin: 4.5rem auto; }
.tag { width: 36rem; height: 4.5rem; margin: auto; }
.treasures { height: 92rem; padding-top: 3.5rem; }
.treasures h3 { margin-top: 10rem; }
.treasures figure { display: inline-block; width: 24%; margin: 0 0.5%; vertical-align: middle; }
.treasures figure:nth-of-type(2) { width: 43%; }
.treasures figure:first-of-type, .treasures figure:last-of-type { border-bottom: 0.3rem solid rgba(16, 61, 100, 0.59); padding-bottom: 3rem; }
.treasures hr { display: none; }
.treasures figcaption { font-size: 2.1rem; margin: 1.5rem 0; }
.treasures .piece { width: 100%; }
.history { height: 82rem; padding: 7.5rem 8rem 0; }
.history p { max-width: 98rem; margin: 2rem auto; }
.gallery { height: 83rem; padding: 10.5rem 1rem 0; position: relative; overflow: hidden; }
.gallery figure { display: inline-block; width: 17%; margin: 0 3%; vertical-align: top; position: relative; z-index: 1; transform: translateX(-3rem); }
.gallery figure:nth-of-type(2) { margin-top: -5.5rem; }
.gallery figure:nth-of-type(3) { margin-top: 8.5rem; }
.gallery figure:nth-of-type(4) { margin-top: -2rem; }
.gallery figure .photo { width: 100%; height: 56.5rem; border-radius: 4.5rem; }
.gallery .ornament { position: absolute; width: 39%; top: 16rem; opacity: 0.55; }
.gallery .left { left: -14%; transform: rotate(-90deg); }
.gallery .right { right: -14%; transform: rotate(90deg); }
.gallery figcaption { position: absolute; bottom: 1.2rem; left: 10%; width: 80%; padding: 0.8rem; color: #FFFFFF; font-size: 2.3rem; }
.poem { height: 72rem; padding: 2rem 8rem 1.5rem; }
.poem p { max-width: 97rem; margin: 2.5rem auto; }
.photos { padding: 0; height: 59rem; position: relative; overflow: hidden; }
.photos svg { width: 100%; height: 100%; }
.photos p { position: absolute; left: 0; bottom: 0; width: 29%; margin: 0; color: #FFFFFF; padding: 0 2rem 2.5rem; text-align: right; }
.after-photos { height: 51rem; text-align: left; padding: 4.5rem 8% 1rem; }
.after-photos p { max-width: 100rem; }
.today { height: 132rem; padding: 2.5rem 0 0; position: relative; overflow: hidden; }
.today article { position: relative; z-index: 2; width: 54%; padding: 3rem 0 0 9%; text-align: center; }
.today article p { margin: 2.2rem 0; }
.today .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.scene-building, .scene-horse { mix-blend-mode: multiply; }
footer { height: 32.5rem; color: #FFFFFF; text-align: center; position: relative; font-size: 3rem; }
footer svg { position: absolute; width: 100%; height: 100%; }
footer p { position: relative; margin: 0; padding-top: 12.5rem; color: #FFFFFF; font-size: 3rem; }
@media (min-width: 768px) and (max-width: 1199px) {
  html { font-size: 0.9765625vw; }

  section { padding: 4rem 2.5rem; }
  h2 { font-size: 3.2rem; }
  h3 { font-size: 2.4rem; }
  p { font-size: 2.2rem; }
  hr { margin: 3rem auto; }

  .treasures { height: auto; padding-top: 2.5rem; }
  .treasures h3 { margin-top: 5rem; }
  .history { height: auto; padding: 5rem 4rem 0; }
  .gallery { height: auto; padding: 6rem 1rem 2rem; }
  .poem { height: auto; padding: 3rem 4rem 2rem; }
  .after-photos { height: auto; padding: 3rem 6% 1rem; }
  .today { height: auto; }
  .today article { width: 100%; padding: 2rem 6%; text-align: center; }
  footer { height: auto; }
  footer p { padding: 6rem 1rem; }
}

@media (max-width: 767px) {
  html { font-size: 10px; }
  body { font-size: 15px; }

  header { height: 48rem; }
  header h1 { padding-top: 19rem; font-size: 2.6rem; letter-spacing: 0.15rem; }
  header p { font-size: 1.5rem; margin: 1rem 4vw; line-height: 1.6; }
  nav {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px; padding: 1rem 4vw; font-size: 1.2rem; text-align: center;
  }
  nav a { margin: 0; }

  section { padding: 5vh 5vw; }
  h2 { font-size: 2.6rem; margin: 1rem 0; }
  h3 { font-size: 1.9rem; margin: 1.2rem 0; }
  p { font-size: 1.5rem; line-height: 1.7; }
  hr { margin: 2.5rem auto; width: 90%; }
  .tag { width: 24rem; height: 3.2rem; }

  /* 珍宝区：三图上下堆叠 */
  .treasures { height: auto; padding-top: 2rem; }
  .treasures h3 { margin-top: 3rem; }
  .treasures figure { display: block; width: 70%; margin: 2rem auto; }
  .treasures figure:nth-of-type(2) { width: 60%; }
  .treasures .piece { width: 100%; height: auto; }
  .treasures figcaption { font-size: 1.4rem; margin: 1rem 0; }

  /* 窑史 */
  .history { height: auto; padding: 5vh 6vw 0; }
  .history p { max-width: 100%; margin: 1.5rem auto; }

  /* 型画书彩：两列排布 */
  .gallery { height: auto; padding: 5vh 2vw 2rem; overflow: visible; }
  .gallery figure {
    display: inline-block; width: 44%; margin: 1rem 2%;
    transform: none; vertical-align: top; position: relative;
  }
  .gallery figure:nth-of-type(2),
  .gallery figure:nth-of-type(3),
  .gallery figure:nth-of-type(4) { margin-top: 1rem; }
  .gallery figure .photo { width: 100%; height: auto; border-radius: 2rem; }
  .gallery .ornament { display: none; }
  .gallery figcaption { font-size: 1.4rem; bottom: 0.6rem; }

  .poem { height: auto; padding: 5vh 6vw; }
  .poem p { max-width: 100%; margin: 1.5rem auto; }

  .photos { height: auto; }
  .photos svg { width: 100%; height: auto; }
  .photos p {
    position: relative; width: 100%;
    font-size: 1.5rem; padding: 1.2rem; text-align: center;
    background: #103D64;
  }

  .after-photos { height: auto; padding: 5vh 6vw; text-align: left; }

  .today { height: auto; padding: 0; overflow: visible; }
  .today .scene { position: relative; width: 100%; height: auto; }
  .today article { width: 100%; padding: 5vh 6vw; text-align: left; }
  .today article p { margin: 1.2rem 0; }

  footer { height: auto; }
  footer svg { width: 100%; height: auto; }
  footer p { padding: 4rem 1rem; font-size: 1.6rem; line-height: 1.6; }
}