html {
  scroll-behavior: smooth;
  background: #fffafb;
}

body {
  margin: 0;
  background: #fffafb;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.page {
  --shell: #f7e8ea;
  --shell-deep: #eed1d6;
  --pearl: #fffafb;
  --paper: #fff5f5;
  --ink: #754653;
  --ink-strong: #5f3540;
  --muted: #98747c;
  --gold: #bc9668;
  --line: rgba(117, 70, 83, 0.2);
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --song: "Songti SC", STSong, "Noto Serif CJK SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  overflow: clip;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--sans);
}

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

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

.page button {
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.page button:focus-visible,
.page a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.page [data-pink-reveal] {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 750ms ease;
}

.page .visible {
  transform: translateY(0);
  opacity: 1;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: var(--ink-strong);
  mix-blend-mode: multiply;
}

.wordmark {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.menuButton {
  display: flex;
  min-width: 64px;
  min-height: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menuButton span {
  font-family: var(--song);
  font-size: 14px;
  letter-spacing: 0.12em;
}

.menuButton i {
  position: relative;
  display: block;
  width: 1px;
  height: 30px;
  background: var(--gold);
}

.menuButton i::after {
  position: absolute;
  top: 14px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  flex-direction: column;
  padding: 118px 24px 34px;
  background: rgba(247, 232, 234, 0.985);
  transition: clip-path 620ms cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 620ms;
}

.menuOpen {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 620ms cubic-bezier(0.76, 0, 0.24, 1);
}

.menu nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.menu nav a {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--song);
  font-size: clamp(31px, 9vw, 48px);
}

.menu nav span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 10px;
}

.currentVersion {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  font-family: var(--song);
  font-size: 12px;
}

.currentVersion svg,
.collectionInfo svg,
.peopleCopy svg,
.contactDirectory svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--shell);
}

.heroImage,
.heroFade {
  position: absolute;
  inset: 0;
}

.heroImage {
  transform: scale(1.025);
  background-image: url("/pink-concept-hero.webp");
  background-position: 56% center;
  background-size: cover;
  filter: saturate(0.9) contrast(0.99) brightness(1.025);
  animation: heroEnter 1.25s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.heroFade {
  background:
    linear-gradient(180deg, rgba(255, 250, 251, 0.22), transparent 26%, transparent 77%, var(--shell)),
    linear-gradient(90deg, rgba(247, 232, 234, 0.78), rgba(247, 232, 234, 0.14) 56%, transparent 78%);
  pointer-events: none;
}

.heroCopy {
  position: absolute;
  top: 57svh;
  right: 24px;
  left: 24px;
  z-index: 2;
}

.heroCopy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--song);
  font-size: clamp(43px, 11vw, 66px);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 1.42;
}

.heroLine {
  position: absolute;
  top: 20svh;
  bottom: 20svh;
  left: 24px;
  z-index: 2;
  width: 1px;
  background: linear-gradient(transparent, var(--line) 16%, var(--line) 84%, transparent);
}

.heroLine i {
  position: absolute;
  bottom: 9%;
  left: -4px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
}

.scrollCue {
  position: absolute;
  right: 24px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--song);
  font-size: 10px;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
}

.scrollCue i {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold), transparent);
}

@keyframes heroEnter {
  from { transform: scale(1.08); opacity: 0.5; }
  to { transform: scale(1.025); opacity: 1; }
}

.crystalBridge {
  position: relative;
  min-height: 104svh;
  overflow: hidden;
  margin-top: -2px;
  background: var(--shell);
}

.crystalBridge::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 22vh;
  background: linear-gradient(var(--shell), transparent);
  content: "";
}

.crystalMacro {
  position: absolute;
  inset: -12% -46% -6% -34%;
  background-image: url("/macro-crystal.webp");
  background-position: 43% center;
  background-size: cover;
  filter: saturate(0.9) brightness(1.04);
}

.crystalMacro::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(247, 232, 234, 0.25) 66%, var(--shell));
  content: "";
}

.crystalCopy {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 104svh;
  flex-direction: column;
  justify-content: flex-end;
  padding: 55svh 24px 12svh;
}

.crystalCopy > span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 11px;
}

.crystalCopy h2,
.collectionHeader h2,
.momentsHeading h2,
.peopleCopy h2,
.contactHeading h2 {
  margin: 14px 0 0;
  font-family: var(--song);
  font-size: clamp(40px, 10.5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 1.22;
}

.crystalCopy p {
  max-width: 310px;
  margin: 24px 0 0 12%;
  color: var(--muted);
  font-family: var(--song);
  font-size: 13px;
  line-height: 1.9;
}

.collectionSection {
  position: relative;
  padding: 100px 24px 90px;
  background: var(--paper);
}

.collectionHeader {
  text-align: center;
}

.collectionHeader p {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--song);
  font-size: 12px;
}

.collectionStage {
  position: relative;
  margin-top: 56px;
}

.collectionImageButton {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--shell);
  cursor: zoom-in;
}

.collectionImage {
  position: absolute;
  inset: 0;
  transform: scale(1.035);
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.88) contrast(0.99) brightness(1.025);
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.collectionImageActive {
  transform: scale(1);
  opacity: 1;
}

.collectionInfo {
  position: relative;
  z-index: 2;
  margin: -82px 18px 0;
  padding: 24px 22px 22px;
  background: rgba(255, 250, 251, 0.94);
  box-shadow: 0 18px 50px rgba(112, 64, 77, 0.08);
  backdrop-filter: blur(12px);
}

.collectionIndex {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 11px;
}

.collectionInfo h3 {
  margin: 9px 0 0;
  font-family: var(--song);
  font-size: 31px;
  font-weight: 400;
}

.collectionInfo p {
  margin: 13px 0 0;
  color: var(--muted);
  font-family: var(--song);
  font-size: 11px;
  line-height: 1.8;
}

.collectionInfo button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-family: var(--song);
  font-size: 11px;
  cursor: pointer;
}

.collectionTabs {
  display: grid;
  margin-top: 42px;
  border-top: 1px solid var(--line);
}

.collectionTabs button {
  display: grid;
  min-height: 64px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--song);
  text-align: left;
  cursor: pointer;
  transition: padding 260ms ease, color 260ms ease;
}

.collectionTabs button span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 10px;
}

.collectionTabs .collectionTabActive {
  padding-left: 10px;
  color: var(--ink-strong);
}

.detailStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--shell-deep);
}

.detailStrip button {
  position: relative;
  aspect-ratio: 1 / 1.18;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 250, 251, 0.7);
  background: transparent;
  cursor: zoom-in;
}

.detailStrip button:last-child {
  border-right: 0;
}

.detailStrip span {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.86) brightness(1.03);
  transition: transform 600ms ease;
}

.detailStrip button:hover span {
  transform: scale(1.045);
}

.detailOne { background-image: url("/macro-crystal.webp"); background-position: 37% center; }
.detailTwo { background-image: url("/pink-concept-collection.webp"); background-position: 48% 75%; }
.detailThree { background-image: url("/hero-crystal.webp"); background-position: 85% center; }

.moments {
  padding: 104px 0 88px;
  background: var(--pearl);
}

.momentsHeading {
  position: relative;
  padding: 0 24px;
  text-align: center;
}

.roundDetail {
  display: block;
  width: 100px;
  height: 100px;
  margin: -154px auto 36px;
  border: 8px solid rgba(255, 250, 251, 0.86);
  border-radius: 50%;
  background: url("/macro-crystal.webp") 48% center / 245% auto no-repeat;
  box-shadow: 0 13px 34px rgba(117, 70, 83, 0.1);
}

.momentsHeading p {
  margin: 15px 0 0;
  color: var(--muted);
  font-family: var(--song);
  font-size: 11px;
}

.momentsHeading p::after {
  display: block;
  width: 36px;
  height: 1px;
  margin: 13px auto 0;
  background: var(--gold);
  content: "";
}

.momentsRail {
  display: flex;
  gap: 10px;
  margin-top: 52px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 24px 20px;
  scroll-padding-left: 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.momentsRail::-webkit-scrollbar { display: none; }

.moment {
  width: min(72vw, 360px);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  scroll-snap-align: start;
  cursor: zoom-in;
}

.momentImage {
  display: block;
  aspect-ratio: 3 / 4;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.82) contrast(0.99) brightness(1.035);
}

.momentMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--song);
  font-size: 15px;
}

.momentMeta i {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 10px;
  font-style: normal;
}

.people {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  padding: 116px 24px 84px;
  background: var(--shell);
}

.peopleImage {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48%;
}

.peopleMain,
.peopleMacro {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
}

.peopleMain {
  inset: 0 34% 0 0;
  background-image: url("/wear-crystal.webp");
  background-position: center;
  filter: saturate(0.82) brightness(1.04);
}

.peopleMacro {
  inset: 0 0 0 67%;
  background-image: url("/pink-concept-collection.webp");
  background-position: 54% center;
  filter: saturate(0.86) brightness(1.03);
}

.peopleImage::before {
  position: absolute;
  inset: -100px 0 auto;
  z-index: 2;
  height: 150px;
  background: linear-gradient(var(--shell), transparent);
  content: "";
}

.peopleCopy {
  position: relative;
  z-index: 3;
}

.peopleCopy > span {
  display: block;
  margin-top: 42px;
  color: var(--ink-strong);
  font-family: var(--song);
  font-size: 30px;
}

.peopleCopy p {
  max-width: 330px;
  margin: 22px 0 0 9%;
  color: var(--muted);
  font-family: var(--song);
  font-size: 12px;
  line-height: 1.95;
}

.peopleCopy a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 23px 0 0 9%;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--song);
  font-size: 11px;
}

.cat {
  position: absolute;
  right: 7px;
  bottom: 40%;
  z-index: 4;
  width: 112px;
  height: auto;
}

.contact {
  padding: 104px 24px 80px;
  background: var(--pearl);
}

.contactHeading p {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: var(--song);
  font-size: 12px;
}

.contactDirectory {
  margin-top: 62px;
  border-top: 1px solid var(--line);
}

.contactDirectory a {
  display: grid;
  min-height: 86px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: padding 240ms ease, color 240ms ease;
}

.contactDirectory a:hover {
  padding: 0 7px;
  color: var(--ink-strong);
}

.contactDirectory span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 10px;
}

.contactDirectory strong {
  font-family: var(--song);
  font-size: 21px;
  font-weight: 400;
}

.contactNote {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.footer {
  padding: 68px 24px 38px;
  border-top: 1px solid var(--line);
  background: var(--shell);
}

.footerWordmark {
  font-family: var(--serif);
  font-size: clamp(52px, 14vw, 88px);
  letter-spacing: -0.055em;
}

.footer > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 42px;
  color: var(--muted);
  font-size: 9px;
}

.footer p { margin: 0; }

.footer a {
  width: max-content;
  border-bottom: 1px solid var(--line);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 64px 24px 34px;
  background: rgba(255, 250, 251, 0.985);
}

.lightboxOpen {
  display: grid;
}

.lightboxImage {
  width: min(100%, 680px);
  height: min(76vh, 860px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.lightboxClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lightboxClose span {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 30px;
  height: 1px;
  transform: rotate(45deg);
  background: var(--ink);
}

.lightboxClose span:last-child { transform: rotate(-45deg); }

@media (min-width: 760px) {
  .header { height: 86px; padding: 0 6vw; }
  .wordmark { font-size: 35px; }
  .menu { padding: 142px 8vw 48px; }
  .menu nav { width: min(900px, 70vw); }
  .menu nav a { grid-template-columns: 64px 1fr; font-size: clamp(44px, 5vw, 72px); }

  .heroImage { background-position: center; }
  .heroFade {
    background:
      linear-gradient(180deg, rgba(255, 250, 251, 0.22), transparent 24%, transparent 78%, var(--shell)),
      linear-gradient(90deg, rgba(247, 232, 234, 0.86), rgba(247, 232, 234, 0.3) 42%, transparent 69%);
  }
  .heroCopy { top: 49%; right: 43%; left: 7vw; transform: translateY(-50%); }
  .page .heroCopy.visible { transform: translateY(-50%); }
  .heroCopy h1 { font-size: clamp(56px, 5vw, 82px); line-height: 1.3; white-space: nowrap; }
  .heroLine { top: 22vh; bottom: 16vh; left: 7vw; }
  .scrollCue { right: 6vw; bottom: 36px; }

  .crystalMacro { inset: -10% 0 -8% 43%; background-position: center; }
  .crystalCopy { min-height: 900px; justify-content: center; padding: 130px 54% 130px 8vw; }
  .crystalCopy h2,
  .collectionHeader h2,
  .momentsHeading h2,
  .peopleCopy h2,
  .contactHeading h2 { font-size: clamp(56px, 5.4vw, 86px); }
  .crystalCopy p { margin-left: 16%; font-size: 14px; }

  .collectionSection { padding: 134px 8vw 120px; }
  .collectionHeader { text-align: left; }
  .collectionHeader p { margin-left: 6px; font-size: 14px; }
  .collectionStage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(310px, 0.72fr); align-items: center; gap: 0; margin-top: 76px; }
  .collectionImageButton { aspect-ratio: 1.16 / 1; }
  .collectionInfo { margin: 0 0 0 -60px; padding: 38px 42px; }
  .collectionInfo h3 { font-size: 46px; }
  .collectionInfo p { max-width: 340px; font-size: 13px; }
  .collectionTabs { grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
  .collectionTabs button { min-height: 72px; border-right: 1px solid var(--line); }
  .collectionTabs button:last-child { border-right: 0; }

  .detailStrip { padding: 0 8vw; background: var(--paper); }
  .detailStrip button { aspect-ratio: 1.3 / 1; }

  .moments { padding: 154px 0 122px; }
  .roundDetail { width: 126px; height: 126px; margin-top: -218px; }
  .momentsRail { gap: 16px; padding: 0 8vw 22px; scroll-padding-left: 8vw; }
  .moment { width: min(34vw, 470px); }

  .people { min-height: 980px; padding: 142px 8vw 100px; }
  .peopleCopy { width: min(710px, 58vw); }
  .peopleCopy p { max-width: 430px; margin-left: auto; font-size: 14px; }
  .peopleCopy a { margin-left: calc(100% - 430px); }
  .peopleImage { right: 0; left: 45%; height: 100%; }
  .peopleMain { inset: 22% 35% 0 0; }
  .peopleMacro { inset: 39% 0 8% 66%; }
  .peopleImage::before { inset: 0 0 auto; width: 140px; height: 100%; background: linear-gradient(90deg, var(--shell), transparent); }
  .cat { right: 4vw; bottom: 12%; width: 156px; }

  .contact { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 10vw; padding: 138px 8vw 110px; }
  .contactDirectory { margin-top: 0; }
  .contactNote { grid-column: 2; }

  .footer { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 88px 8vw 42px; }
  .footerWordmark { font-size: clamp(86px, 8vw, 138px); }
  .footer > div:last-child { align-items: flex-end; margin: 0; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .page *,
  .page *::before,
  .page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .page [data-pink-reveal] {
    transform: none;
    opacity: 1;
  }

  .heroImage { transform: scale(1.025); }
}