/* =====================================================================
   Mooncake Landing Page · 样式（第二版：框景观月）
   米白纸面为地，酒红一处成面，淡粉一条色带，暖金只作发丝线与大数字。
   照片永远完整（object-fit: contain），只有容器有圆角与投影。
   动效只用 transform / opacity，完整支持 prefers-reduced-motion。
   ===================================================================== */

:root {
  --cream: #F5EFE5;
  --cream-2: #EFE4D4;
  --pink: #EAD7D2;
  --pink-2: #F7EDE9;
  --moon: #E4CBC6;               /* 淡粉的一档深色，只用于圆月 */
  --gold: #C8A05A;               /* 只做线、大数字、深底上的字 */
  --gold-ink: #7A5A24;           /* 浅底上的小字金（5.5:1） */
  --brown: #2F1D17;
  --ink: #2F1D17;
  --ink-2: #4A3A33;
  --ink-soft: #6B5A50;
  --wine: #6E2630;
  --wine-deep: #571C25;
  --line: rgba(47, 29, 23, 0.14);
  --line-gold: rgba(200, 160, 90, 0.5);

  --photo-radius: 8px;
  --btn-radius: 3px;
  --shadow-ground: 0 2px 4px rgba(47, 29, 23, 0.06), 0 30px 60px -30px rgba(47, 29, 23, 0.42);

  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 72px;

  --fs-h2: clamp(2.25rem, 4vw, 3.6rem);
  --fs-lead: clamp(1.05rem, 1.2vw, 1.2rem);
}

@media (min-width: 1600px) {
  :root { --container: 1440px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--gold-ink) var(--cream);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}

::selection { background: var(--pink); color: var(--wine); }

img { max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--ink);
  text-wrap: balance;
  text-spacing-trim: trim-both;
}
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }
strong { font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}
.on-wine :focus-visible { outline-color: var(--gold); }

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 通栏栅格：内容 12 栏，两侧余量可让照片出血到视口边缘 */
.bleed {
  --cw: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] repeat(12, [col-start] calc(var(--cw) / 12))
    [content-end] minmax(var(--gutter), 1fr)
    [full-end];
}

/* 跳转链接（仅键盘聚焦时出现） */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brown);
  color: #FBF6EE;
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------------------------------------------------------------- 头部 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  container-type: scroll-state;
}
.site-header__bar {
  height: 100%;
  background: rgba(245, 239, 229, 0.94);
  border-bottom: 1px solid rgba(200, 160, 90, 0.3);
  transition: border-color 0.3s, box-shadow 0.3s;
}
@container scroll-state(stuck: top) {
  .site-header__bar {
    border-bottom-color: rgba(200, 160, 90, 0.6);
    box-shadow: 0 10px 30px -24px rgba(47, 29, 23, 0.4);
  }
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.wordmark__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.wordmark__tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
}
.site-nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
}
.site-nav a,
.header-cta {
  position: relative;
  padding: 8px 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 calc(100% - 4px) / 0 1px;
  transition: background-size 0.35s var(--ease), color 0.25s;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.header-cta:hover,
.header-cta:focus-visible {
  background-size: 100% 1px;
  color: var(--ink);
}
.header-cta {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--wine);
  background-size: 100% 1px;
}
.header-cta:hover,
.header-cta:focus-visible { color: var(--wine-deep); background-image: linear-gradient(var(--wine), var(--wine)); }

/* 背景音乐开关：文字 + 三根小线条，播放时线条跳动 */
.music-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.25s;
}
.music-toggle:hover,
.music-toggle:focus-visible { color: var(--ink); }
/* 音符：深金线描，关闭时带一道斜线，播放时斜线淡出、音符轻轻摇摆 */
.music-toggle__note {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gold-ink);
  transform-origin: 50% 85%;
  transition: color 0.25s;
}
.music-toggle:hover .music-toggle__note,
.music-toggle:focus-visible .music-toggle__note { color: var(--ink); }
.music-toggle__slash {
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.music-toggle.is-playing .music-toggle__slash { opacity: 0; }
.music-toggle.is-playing .music-toggle__note { animation: music-note 2.6s ease-in-out infinite; }
@keyframes music-note {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
.music-toggle__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 12px;
}
.music-toggle__bars i {
  display: block;
  width: 2px;
  height: 4px;
  background: var(--gold-ink);
  transform-origin: bottom;
  transition: height 0.3s var(--ease);
}
.music-toggle.is-playing .music-toggle__bars i { animation: music-bar 1.1s ease-in-out infinite; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(2) { animation-delay: -0.35s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(3) { animation-delay: -0.7s; }
@keyframes music-bar {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-toggle__bars i { animation: none; height: 9px; }
  .music-toggle.is-playing .music-toggle__note { animation: none; }
}

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn--primary {
  background: var(--wine);
  border-color: var(--wine);
  color: #FBF6EE;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--wine-deep);
  border-color: var(--wine-deep);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--wine);
  color: var(--wine);
  transform: translateY(-1px);
}
.on-wine .btn--primary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--wine);
}
.on-wine .btn--primary:hover,
.on-wine .btn--primary:focus-visible {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}
/* 价格：大数字宋体 300，货币与「每盒」小字 */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
}
.price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-serif);
  color: var(--wine);
  font-variant-numeric: lining-nums tabular-nums;
}
.price__cur {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.price__num {
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
}
.price__note {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.price__unit {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
}
.on-wine .price { color: var(--cream); }
.on-wine .price__note,
.on-wine .price__unit { color: var(--pink); }

/* ---------------------------------------------------------------- 通用排版 */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.section-title em {
  font-style: normal;
  font-weight: 300;
  color: var(--wine);
}
.on-wine .section-title { color: var(--cream); }
.on-wine .section-title em { color: var(--gold); }
.section-lead {
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink-2);
  margin-bottom: 40px;
}
.on-wine .section-lead { color: var(--pink); }
.section {
  position: relative;
  padding-block: clamp(88px, 11vw, 160px);
  /* 锚点落点：让区块顶部 56px 的留白藏到顶栏后面，点击导航后标题就在视口上方 */
  scroll-margin-top: calc(var(--header-h) - 56px);
}

/* 照片容器：只做圆角与落地投影，照片本体完整显示 */
.photo-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--photo-radius);
  overflow: hidden;
  background: rgba(47, 29, 23, 0.04);
  box-shadow: var(--shadow-ground);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 通用 chevron（纯 CSS 线条） */
.chevron {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.chevron--right { transform: translateX(-1px) rotate(-45deg); }
.chevron--left  { transform: translateX(2px) rotate(135deg); }

/* ---------------------------------------------------------------- Section 1 · Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  scroll-margin-top: var(--header-h);
}
/* 桂花暗纹：64px 一组的四瓣小点，净透明度约 8%，只铺在首屏 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23C8A05A' fill-opacity='0.18'%3E%3Ccircle cx='32' cy='23' r='1.7'/%3E%3Ccircle cx='41' cy='32' r='1.7'/%3E%3Ccircle cx='32' cy='41' r='1.7'/%3E%3Ccircle cx='23' cy='32' r='1.7'/%3E%3Ccircle cx='32' cy='32' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  opacity: 0.45;
  pointer-events: none;
}
/* 祥云线描：暖金发丝线，左下与右上各一道 */
.hero__cloud {
  position: absolute;
  z-index: 0;
  width: clamp(160px, 22vw, 340px);
  height: auto;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.hero__cloud--left { left: 3%; bottom: 9%; }
.hero__cloud--right { right: 4%; top: 11%; transform: scaleX(-1); }
.hero__grid {
  position: relative;
  z-index: 1;
  min-height: min(calc(100svh - var(--header-h)), 940px);
  align-items: center;
  padding-block: clamp(32px, 5vh, 56px);
}
.hero__copy {
  display: flex;
  align-items: center;
}
.hero__copy--left {
  grid-column: col-start 1 / col-start 4;
  justify-content: flex-start;
}
.hero__copy--right {
  grid-column: col-start 10 / content-end;
  padding-left: clamp(8px, 1.5vw, 24px);
}
.hero__title {
  writing-mode: vertical-lr;   /* 从左到右读：先「月满人间」，再「礼遇团圆」 */
  font-size: min(clamp(4.25rem, 7.2vw, 6.75rem), calc((100svh - var(--header-h) - 12rem) / 4.6));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-wrap: initial;
}
.hero__line { display: block; }
.hero__text { width: 100%; }
.hero__lead {
  max-width: 20em;
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink-2);
}
.entry-list {
  margin-top: 32px;
  border-top: 1px solid var(--ink);
}
.entry-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s;
}
.entry-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.entry-card__meta {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.entry-card__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--gold-ink);
  transition: transform 0.35s var(--ease), border-color 0.25s, color 0.25s;
}
.entry-card:hover,
.entry-card:focus-visible { color: var(--wine); }
.entry-card:hover .entry-card__go,
.entry-card:focus-visible .entry-card__go {
  transform: translateX(6px);
  border-color: var(--wine);
  color: var(--wine);
}
.hero__note {
  margin-top: 24px;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  color: var(--gold-ink);
}
/* 中间：产品组合，身后圆月与月晕 */
.hero__visual {
  grid-column: col-start 4 / col-start 10;
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 3vh, 32px) clamp(12px, 2vw, 32px);
}
.hero__moon-wrap {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(118%, 72vh, 680px);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--mx, 0) * 12px), calc(-52% + var(--my, 0) * 8px));
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.hero__moon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--moon);
}
.hero__moon::before,
.hero__moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.hero__moon::before { inset: -7%; opacity: 0.5; }
.hero__moon::after { inset: -15%; opacity: 0.25; }
/* 产品场景：四粒装礼盒在后上方，六粒装托盘在前下方，两件抠图各自漂浮；只动容器，照片像素不变 */
.hero-scene {
  position: relative;
  z-index: 1;
  width: min(100%, 640px);
  aspect-ratio: 1 / 0.92;
}
.hero-scene__item {
  position: absolute;
  margin: 0;
  animation: hero-drift 7s ease-in-out infinite;
}
.hero-scene__item img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.hero-scene__item--box {
  top: 0;
  right: 1%;
  width: 56%;
  z-index: 1;
  animation-duration: 8s;
  animation-delay: -2.5s;
}
.hero-scene__item--tray {
  left: 0;
  bottom: 0;
  width: 80%;
  z-index: 2;
}
.hero-scene__shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(47, 29, 23, 0.32) 0%, rgba(47, 29, 23, 0.12) 45%, rgba(47, 29, 23, 0) 72%);
  animation: hero-drift-shadow 7s ease-in-out infinite;
}
.hero-scene__item--box .hero-scene__shadow {
  animation-duration: 8s;
  animation-delay: -2.5s;
  bottom: -3%;
  height: 16%;
}
@keyframes hero-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes hero-drift-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.94); opacity: 0.8; }
}

/* ---------------------------------------------------------------- Section 2 · 六粒装 */
.section--six { padding-block: clamp(72px, 8vw, 120px) clamp(88px, 11vw, 160px); }
.split { align-items: start; }
.split__media {
  grid-column: full-start / col-start 7;
  display: flex;
  justify-content: flex-start;
}
.split__copy {
  grid-column: col-start 8 / content-end;
  padding-top: clamp(24px, 4vw, 64px);
  padding-right: clamp(0px, 2vw, 32px);
}
/* 六粒装照片向左出血到视口边缘，与四粒装向右出血互为镜像 */
.photo-frame--six {
  aspect-ratio: auto;
  height: clamp(500px, 50vw, 720px);
  width: auto;
  max-width: 100%;
  background: transparent;
  border-radius: 0 var(--photo-radius) var(--photo-radius) 0;
}
.photo-frame--six img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin-right: auto;
  object-fit: contain;
}
.flavor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  margin: 0 0 44px;
  border-bottom: 1px solid var(--line-gold);
}
.flavor-list li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 15px 0 13px;
  border-top: 1px solid var(--line-gold);
}
.flavor-list__num {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--gold-ink);
}
.flavor-list__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}
.flavor-list__note {
  grid-column: 2;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- Section 3 · 四粒装（酒红成面） */
.section--four {
  background: var(--wine);
  color: var(--cream);
  padding-block: clamp(80px, 9vw, 128px) clamp(96px, 12vw, 176px);
}
.four { align-items: start; }
.four__copy {
  grid-column: col-start 1 / col-start 7;
  padding-top: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 3vw, 56px);
}
.four__media {
  grid-column: col-start 7 / full-end;
  display: flex;
  justify-content: flex-end;
}
.photo-frame--four {
  aspect-ratio: auto;
  height: clamp(500px, 50vw, 720px);
  width: auto;
  max-width: 100%;
  background: transparent;
  border-radius: var(--photo-radius) 0 0 var(--photo-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 40px 80px -36px rgba(0, 0, 0, 0.55);
}
.photo-frame--four img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin-left: auto;
  object-fit: contain;
}
.spec-list {
  margin: 0 0 44px;
  border-bottom: 1px solid rgba(200, 160, 90, 0.45);
}
.spec-list__row {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(200, 160, 90, 0.45);
}
.spec-list dt {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--pink);
  padding-top: 3px;
}
.spec-list dd {
  margin: 0;
  color: var(--cream);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- Section 4 · 口味舞台 */
.section--flavors {
  background: var(--cream);
  padding-block: clamp(88px, 11vw, 160px) 0;
}
.flavors__head { margin-bottom: clamp(28px, 4vw, 52px); }
.flavors__head .section-lead { margin-bottom: 0; }

/* 舞台：背景色扫过、巨大口味名在照片身后、照片整张滑入落定 */
.stage {
  --dir: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(600px, 84vh, 860px);
  background: var(--pink);
  user-select: none;
  touch-action: pan-y;
}
.stage:focus-visible { outline-offset: -3px; }
.stage__bg,
.stage__wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pink);
}
.stage__wipe {
  z-index: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s var(--ease);
}
.stage__word {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8vh;
  pointer-events: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(5.5rem, 21vw, 19rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.stage__word .ch {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(var(--dir) * 0.4em));
}
.stage__word.is-in .ch {
  opacity: 1;
  transform: none;
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stage__slides {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  padding: clamp(88px, 11vh, 128px) var(--gutter) clamp(28px, 4vh, 44px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* 离场：容器保持可见，只有照片带着轻微反向旋转滑出，说明与文字先淡出 */
.slide.is-leave {
  visibility: visible;
  opacity: 1;
}
.slide.is-leave .slide__sat,
.slide.is-leave .slide__caption {
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.slide__media {
  position: relative;
  align-self: center;
  height: min(58vh, 560px);
  aspect-ratio: 3 / 4;
  border-radius: var(--photo-radius);
  overflow: hidden;
  background: rgba(47, 29, 23, 0.04);
  box-shadow: var(--shadow-ground);
  opacity: 0;
  transform: translateX(calc(var(--dir) * 22%)) rotate(calc(var(--dir) * 4deg));
}
.slide.is-active .slide__media {
  opacity: 1;
  transform: none;
  transition: transform 0.95s var(--ease), opacity 0.55s var(--ease);
}
.slide.is-leave .slide__media {
  opacity: 0;
  transform: translateX(calc(var(--dir) * -26%)) rotate(calc(var(--dir) * -4deg));
  transition: transform 0.65s cubic-bezier(0.5, 0, 0.75, 0.2), opacity 0.6s cubic-bezier(0.6, 0, 0.9, 0.4);
}
.slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 两句风味说明：竖排，从照片两侧飘入 */
.slide__sat {
  position: absolute;
  top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.32em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(calc(-50% + 28px));
}
.slide__sat--a { left: clamp(24px, 17vw, 24%); }
.slide__sat--b { right: clamp(24px, 17vw, 24%); }
.slide.is-active .slide__sat {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 0.7s var(--ease) 0.35s, transform 0.8s var(--ease) 0.35s;
}
.slide.is-active .slide__sat--b { transition-delay: 0.5s; }
.slide__caption {
  text-align: center;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(12px);
}
.slide.is-active .slide__caption {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease) 0.4s, transform 0.6s var(--ease) 0.4s;
}
.slide__name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.slide__desc {
  margin-top: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.stage__tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(22px, 3.5vh, 36px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(14px, 3vw, 44px);
  padding: 0 clamp(64px, 8vw, 120px);
}
.stage__tab {
  border: 0;
  background: none;
  padding: 8px 2px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  cursor: pointer;
  background-image: linear-gradient(var(--wine), var(--wine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.35s var(--ease), color 0.25s;
}
.stage__tab:hover,
.stage__tab:focus-visible { color: var(--ink); }
.stage__tab[aria-selected="true"] {
  color: var(--ink);
  background-size: 100% 1px;
}
.stage__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  border: 1px solid rgba(47, 29, 23, 0.35);
  background: rgba(245, 239, 229, 0.72);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.stage__arrow--prev { left: clamp(12px, 2.5vw, 40px); }
.stage__arrow--next { right: clamp(12px, 2.5vw, 40px); }
.stage__arrow:hover,
.stage__arrow:focus-visible {
  background: var(--cream);
  border-color: var(--wine);
}

/* ---------------------------------------------------------------- Section 5 · 面交日期 */
.section--pickup { background: var(--cream); }
.pickup__head {
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.pickup__head .section-lead { margin-bottom: 0; }
.date-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  padding-top: 32px;
  border-top: 2px solid var(--gold);
}
.date-card {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 6px 20px 26px;
  border-left: 1px solid var(--line);
}
.date-card::before {
  content: "";
  position: absolute;
  top: -39px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.date-card time {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-serif);
  color: var(--wine);
  font-variant-numeric: lining-nums tabular-nums;
}
.date-card__day {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
}
.date-card__my {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}
.date-card__weekday {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--ink-2);
}
.date-card__place {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.date-card__label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
}
.date-card__venue {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}
/* 地点链接：暖金下划线，悬停变酒红并加粗线；后缀「地图」小字提示会打开地图 */
.date-card__venue--link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 calc(100% - 4px) / 100% 1px;
  transition: color 0.25s, background-size 0.3s var(--ease);
}
.date-card__venue--link:hover,
.date-card__venue--link:focus-visible {
  color: var(--wine);
  background-image: linear-gradient(var(--wine), var(--wine));
  background-size: 100% 2px;
}
.date-card__map {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
}
.date-card__venue--link:hover .date-card__map,
.date-card__venue--link:focus-visible .date-card__map { color: var(--wine); }
.date-card.is-past { opacity: 0.62; }
.date-card.is-next { border-left-color: var(--wine); }
.date-card.is-next .date-card__day { font-weight: 500; }
.closing {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
  margin-top: clamp(72px, 9vw, 140px);
}
.closing__media { width: 100%; max-width: 400px; }
.closing__body {
  padding-top: clamp(16px, 3vw, 48px);
  max-width: 34em;
}
.closing__title {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-bottom: 20px;
}
.closing__hint {
  margin-bottom: 36px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--wine);
}
.closing .cta-row {
  padding-top: 32px;
  border-top: 1px solid var(--line-gold);
}

/* ---------------------------------------------------------------- 页脚（深棕收尾） */
.site-footer {
  background: var(--brown);
  color: var(--cream);
  padding: 56px 0 60px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
.site-footer__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.site-footer__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.site-footer__tag {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--pink);
}
.site-footer__copy {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(245, 239, 229, 0.72);
}
.noscript-note {
  padding-block: 32px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- 进场动效 */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal--photo {
  transform: translateY(28px);
  transition-duration: 1.05s;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js .reveal--chars { opacity: 1; transform: none; }
.js .reveal--chars .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js .reveal--chars.is-visible .ch { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1279px) {
  .hero__copy { column-gap: clamp(20px, 3vw, 40px); }
  .hero__title { font-size: min(clamp(3.6rem, 6.4vw, 5.5rem), calc((100svh - var(--header-h) - 12rem) / 4.6)); }
  .split__copy { grid-column: col-start 8 / content-end; }
}

@media (max-width: 1023px) {
  .hero__grid { display: flex; flex-direction: column; min-height: 0; padding-block: 0; }
  .hero__visual {
    order: -1;
    width: 100%;
    padding: clamp(36px, 6vw, 56px) var(--gutter) clamp(12px, 3vw, 24px);
  }
  .hero__moon-wrap { width: min(92%, 440px); }
  .hero-scene { width: min(100%, 600px); }
  .hero__copy {
    display: block;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 0 var(--gutter);
  }
  .hero__copy--left { padding-top: clamp(28px, 6vw, 48px); }
  .hero__copy--right { padding-bottom: clamp(56px, 8vw, 80px); }
  .hero__title {
    writing-mode: horizontal-tb;
    font-size: clamp(2.6rem, 8vw, 4.25rem);
    line-height: 1.18;
    letter-spacing: 0.08em;
  }
  .hero__text { margin-top: 22px; }
  .hero__cloud--right { display: none; }
  .hero__cloud--left { width: clamp(150px, 30vw, 230px); left: -3%; bottom: auto; top: 5%; opacity: 0.45; }
  .split { display: block; padding-inline: var(--gutter); }
  .split__media { display: block; max-width: 560px; margin-inline: auto; width: 100%; margin-bottom: 48px; }
  .split__copy { padding-right: 0; max-width: 640px; }
  .photo-frame--six {
    height: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--photo-radius);
    background: rgba(47, 29, 23, 0.04);
  }
  .photo-frame--six img { width: 100%; margin: 0; }
  /* 平板与手机：照片在上、文案在下，与六粒装区块一致 */
  .four { display: flex; flex-direction: column; align-items: stretch; padding-inline: var(--gutter); }
  .four__copy { padding-top: 0; padding-right: 0; max-width: 640px; }
  .four__media { order: -1; justify-content: center; margin-top: 0; margin-bottom: 48px; }
  .photo-frame--four {
    height: auto;
    width: min(100%, 560px);
    aspect-ratio: 3 / 4;
    border-radius: var(--photo-radius);
  }
  .photo-frame--four img { width: 100%; margin: 0; }
  .stage { min-height: clamp(560px, 80vh, 760px); }
  .stage__word { font-size: clamp(4.5rem, 24vw, 12rem); }
  .slide__media { height: min(52vh, 480px); }
  .slide__sat--a { left: clamp(20px, 8vw, 12%); }
  .slide__sat--b { right: clamp(20px, 8vw, 12%); }
  /* 平板 2×2：每张票自带金线，圆点落在自己的线上 */
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; border-top: 0; padding-top: 0; }
  .date-card { border-top: 2px solid var(--gold); padding-top: 26px; }
  .date-card::before { top: -5px; }
  .closing { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .closing__media { max-width: 480px; margin-inline: auto; }
  .closing__body { padding-top: 0; }
}

@media (max-width: 767px) {
  .site-nav { display: none; }
  .wordmark__tag { display: none; }
  .music-toggle { padding: 8px 4px; }
  .header-cta {
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--btn-radius);
    background: var(--wine);
    background-image: none;
    color: #FBF6EE;
    font-size: 0.85rem;
  }
  .header-cta:hover, .header-cta:focus-visible { color: #FBF6EE; background: var(--wine-deep); background-image: none; }
  .section { padding-block: clamp(64px, 14vw, 96px); }
  .section--four { padding-block: clamp(72px, 16vw, 110px); }
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  .hero__moon-wrap { width: 100%; }
  .hero__visual { padding: 24px var(--gutter) 8px; }
  .hero-scene { width: 100%; }
  .hero__cloud--left { width: 150px; top: 2%; }
  .flavor-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .stage { min-height: clamp(560px, 88vh, 720px); }
  .stage__word { font-size: clamp(4rem, 28vw, 7rem); padding-bottom: 12vh; }
  .stage__tabs { top: 18px; gap: 2px 18px; padding: 0 52px; }
  .stage__tab { font-size: 0.85rem; letter-spacing: 0.12em; padding: 6px 2px; }
  .slide { padding: 112px var(--gutter) 22px; }
  .slide__media { height: min(46vh, 380px); }
  .slide__sat { display: none; }
  /* 手机端不放箭头，只用手势左右滑动 */
  .stage__arrow { display: none; }
  .date-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    border-top: 0;
    border-left: 2px solid var(--gold);
    padding: 0 0 0 28px;
  }
  .date-card { border-left: 0; border-top: 0; padding: 4px 0 28px; }
  .date-card::before { top: 0.55em; left: -34px; }
  .date-card.is-next { border-left: 0; }
  .cta-row .btn { flex: 1 1 auto; }
}

/* 打印时不隐藏任何内容 */
@media print {
  .js .reveal, .js .reveal--chars .ch { opacity: 1; transform: none; transition: none; }
  .site-header { position: static; }
}

/* ---------------------------------------------------------------- 减少动效 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__moon-wrap { transform: none !important; transition: none; }
  .hero-scene__item, .hero-scene__shadow { animation: none; }
  .js .reveal,
  .js .reveal--chars .ch {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover, .btn:focus-visible { transform: none; }
  .stage__wipe { transition: none; }
  .stage__word .ch,
  .stage__word.is-in .ch { opacity: 1; transform: none; transition: none; }
  .slide__media,
  .slide__caption,
  .slide.is-active .slide__media,
  .slide.is-active .slide__caption,
  .slide.is-leave .slide__media { transition: none; transform: none; }
  .slide.is-active .slide__media,
  .slide.is-active .slide__caption { opacity: 1; }
  .slide__sat,
  .slide.is-active .slide__sat { transition: none; transform: translateY(-50%); }
  .slide.is-active .slide__sat { opacity: 1; }
  .slide.is-leave { transition: none; visibility: hidden; }
  .entry-card:hover .entry-card__go,
  .entry-card:focus-visible .entry-card__go { transform: none; }
  .site-nav a, .header-cta { transition: none; }
}