/* 天鹅庄生肖酒特展样式
   主图：1:1；细节图：4:3；手机断点：600px。
   修改图片显示尺寸请调整 CSS，勿添加固定 HTML height。
*/
:root {
  --gold:#d8b779;
  --paper:#f3efe7;
  --muted:#b4afa4;
  --line:#ffffff26;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:150px;
}

body {
  margin:0;
  background:#121311;
  color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.8;
}

a {
  color:inherit;
  text-decoration:none;
}

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

button {
  font:inherit;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px;
}

.top {
  padding:7px 5%;
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  font-size:13px;
  border-bottom:1px solid var(--line);
}

header {
  background:#111;
  border-bottom:1px solid var(--line);
}

.nav {
  max-width:1400px;
  margin:auto;
  padding:20px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
}

.brand img {
  width:45px;
  height:45px;
  object-fit:contain;
  background:white;
  border-radius:50%;
  padding:3px;
}

.brand-name {
  font-size:23px;
  letter-spacing:.12em;
  color:var(--gold);
  font-weight:700;
}

.brand-name span {
  display:block;
  font-size:12px;
  letter-spacing:.09em;
  font-weight:400;
}

.global-nav {
  display:flex;
  gap:22px;
  font-size:14px;
}

.global-nav [aria-current] {
  color:var(--gold);
}

.section-nav {
  position:sticky;
  top:0;
  z-index:10;
  background:#161714f5;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:center;
  gap:30px;
  padding:14px 20px;
  font-size:14px;
  overflow:auto;
  white-space:nowrap;
}

.section-nav a:hover {
  color:var(--gold);
}

.wrap {
  max-width:1280px;
  margin:auto;
  padding-left:5%;
  padding-right:5%;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:55px;
  min-height:660px;
  padding-top:65px;
  padding-bottom:75px;
}

.kicker {
  font-size:13px;
  letter-spacing:.15em;
  color:var(--gold);
}

h1,h2,h3,p {
  margin-top:0;
}

h1,h2 {
  font-family:"Songti SC","STSong","SimSun",serif;
  font-weight:500;
  line-height:1.3;
}

h1 {
  font-size:clamp(46px,5.4vw,76px);
  margin:22px 0;
}

h1 span {
  color:var(--gold);
}

.lead {
  font-size:18px;
  color:#ccc8be;
  max-width:460px;
}

.hero figure {
  margin:0;
  position:relative;
}

.hero img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
}

.hero figcaption {
  font-size:13px;
  color:var(--muted);
  margin-top:14px;
}

.cta {
  display:inline-block;
  margin-top:18px;
  padding:10px 24px;
  border:1px solid var(--gold);
  color:var(--gold);
}

.intro {
  padding-top:70px;
  padding-bottom:80px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:60px;
}

.intro h2 {
  font-size:36px;
}

.intro p {
  color:#c4c0b7;
}

.light {
  background:var(--paper);
  color:#252623;
}

.light .kicker {
  color:#806137;
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:40px;
}

.section-head h2 {
  font-size:42px;
  margin:12px 0 0;
}

.section-head p {
  max-width:430px;
  margin:0;
  color:#68665f;
}

.collection {
  padding-top:75px;
  padding-bottom:80px;
}

.bottles {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.bottle {
  padding:24px 10px 18px;
  text-align:center;
  border:1px solid #24282016;
  background:#fff7;
}

.bottle img {
  height:225px;
  width:100%;
  object-fit:contain;
  margin-bottom:20px;
}

.bottle .animal {
  font-size:12px;
  color:#86724e;
}

.bottle h3 {
  font-size:18px;
  margin:3px 0;
}

.bottle p {
  font-size:13px;
  color:#66645e;
  line-height:1.5;
  margin:0;
}

.bottle a {
  display:block;
}

.bottle a:hover h3 {
  color:#946b29;
}

.chronology {
  font-size:14px;
  color:#6b685f;
  margin:22px 0 0;
}

.exhibit {
  padding-top:90px;
  padding-bottom:90px;
  border-bottom:1px solid var(--line);
}

.exhibit-top {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:65px;
  align-items:center;
}

.exhibit:nth-of-type(even) .exhibit-top .main-image {
  order:2;
}

.main-image {
  margin:0;
}

.main-image img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
}

.exhibit h2 {
  font-size:46px;
  margin:12px 0 10px;
}

.exhibit h3 {
  font-size:23px;
  color:var(--gold);
  font-weight:500;
  margin-bottom:24px;
}

.exhibit p {
  color:#c2beb4;
}

.number {
  font-family:Georgia,serif;
  font-size:55px;
  line-height:1;
  color:#d8b77970;
  margin-bottom:20px;
}

.detail-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:38px;
}

.detail-grid figure {
  margin:0;
}

.detail-grid img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#1a1b18;
}

.detail-grid figcaption {
  font-size:14px;
  color:var(--muted);
  padding-top:12px;
}

.archive img {
  object-fit:contain;
  background:#242521;
}

.packaging {
  padding-top:65px;
  padding-bottom:70px;
}

.packaging h2 {
  font-size:36px;
  margin:10px 0 24px;
}

.pack-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

.pack-grid article {
  border-top:1px solid #a58a5b;
  padding-top:20px;
}

.pack-grid h3 {
  font-size:21px;
  margin-bottom:12px;
}

.pack-grid p {
  color:#666258;
  margin-bottom:0;
}

.closing {
  padding-top:85px;
  padding-bottom:85px;
  text-align:center;
  background:#501c20;
}

.closing h2 {
  font-size:42px;
  margin:14px 0 20px;
}

.closing p {
  max-width:700px;
  margin:0 auto;
  color:#e0d1c5;
}

.faq {
  max-width:900px;
  padding-top:75px;
  padding-bottom:75px;
}

.faq h2 {
  font-size:32px;
}

.faq details {
  border-bottom:1px solid var(--line);
  padding:18px 0;
}

.faq summary {
  cursor:pointer;
  font-size:18px;
}

.faq details p {
  color:var(--muted);
  margin:15px 0 0;
}

.footer {
  text-align:center;
  padding:35px 5%;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}

.footer p {
  margin:20px 0 0;
}

.source-note {
  font-size:13px;
  color:#989487;
  margin-top:35px;
}

@media(max-width:900px) {
  .global-nav {
    gap:12px;
  }

  .hero {
    gap:25px;
    min-height:auto;
  }

  .bottles {
    grid-template-columns:repeat(4,1fr);
  }

  .exhibit-top {
    gap:30px;
  }

  .section-nav {
    justify-content:flex-start;
  }

  .intro {
    gap:30px;
  }

  .exhibit h2 {
    font-size:38px;
  }

}

@media(max-width:600px) {
  .top span:last-child {
    display:none;
  }

  .nav {
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    padding-top:14px;
    padding-bottom:14px;
  }

  .global-nav {
    width:100%;
    justify-content:space-between;
    gap:6px;
  }

  .section-nav {
    gap:22px;
    padding:12px 5%;
  }

  .hero {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:40px;
    padding-bottom:45px;
  }

  .hero img {
    aspect-ratio:1;
  }

  .hero h1 {
    font-size:49px;
  }

  .hero .lead {
    font-size:17px;
  }

  .intro {
    grid-template-columns:1fr;
    gap:10px;
    padding-top:45px;
    padding-bottom:40px;
  }

  .intro h2 {
    font-size:31px;
  }

  .section-head {
    display:block;
  }

  .section-head h2 {
    font-size:33px;
    margin-bottom:20px;
  }

  .collection {
    padding-top:45px;
    padding-bottom:45px;
  }

  .bottles {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .bottle {
    padding:15px 5px;
  }

  .bottle img {
    height:180px;
  }

  .bottle h3 {
    font-size:16px;
  }

  .bottle p {
    font-size:12px;
  }

  .exhibit {
    padding-top:50px;
    padding-bottom:50px;
  }

  .exhibit-top {
    grid-template-columns:1fr;
    gap:28px;
  }

  .exhibit:nth-of-type(even) .exhibit-top .main-image {
    order:0;
  }

  .exhibit h2 {
    font-size:37px;
  }

  .detail-grid {
    gap:18px;
    grid-template-columns:1fr;
  }

  .detail-grid img {
    max-height:420px;
  }

  .pack-grid {
    grid-template-columns:1fr;
    gap:22px;
  }

  .packaging {
    padding-top:45px;
    padding-bottom:45px;
  }

  .closing h2 {
    font-size:32px;
  }

  .closing {
    padding-top:55px;
    padding-bottom:55px;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

}

/* 生肖酒理念板块 */
.title-line {
  display: block;
}

.hero h1 {
  font-size: clamp(38px, 4.6vw, 64px);
}

.hero h1 span:first-child {
  color: var(--paper);
}

.intro h2 {
  white-space: pre-line;
}

.concept {
  padding-top: 15px;
  padding-bottom: 75px;
}

.concept h2 {
  font-size: 36px;
  margin-top: 15px;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 45px;
}

.concept-grid article {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}

.concept-grid h3 {
  font-size: 22px;
  color: var(--gold);
}

.concept-grid p {
  color: #c2beb4;
}

.exhibit-top {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.main-image, .detail-grid figure, .hero figure {
  min-width: 0;
}

.detail-grid img {
  max-height: none;
}

.source-note {
  line-height: 1.8;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 39px;
  }

  .concept {
    padding-bottom: 45px;
  }

  .concept h2 {
    font-size: 30px;
  }

  .concept-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .exhibit-top, .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-grid img {
    max-height: none;
  }

}