/*
 * 参考 GOOSE PLANET 的节奏原则：少元素、低对比、连续色温、柔和转场。
 * 保留云山青瓷自己的雨夜茶室与器物叙事。
 */
:root {
  --paper: #e9e3d8;
  --ink: #30382f;
  --gold: #9b8565;
}

body {
  background: var(--paper);
}

.opening {
  background: #e7e0d6;
  color: #39362f;
}

.opening::before {
  background:
    linear-gradient(90deg, rgba(247,244,237,.74), rgba(229,221,210,.54)),
    url('generated-assets/scholar-tearoom-enter-v1.png') 58% center / cover no-repeat;
  opacity: .72;
  filter: saturate(.35) blur(2px);
}

.opening::after {
  display: none;
}

.opening > i {
  color: #7f6d53;
  border-color: rgba(107,91,68,.55);
  box-shadow: none;
}

.opening > b {
  color: #39362f;
  font-weight: 400;
  letter-spacing: .2em;
}

.opening > small,
.opening > em {
  color: rgba(57,54,47,.58);
}

.opening > .enter-site {
  color: #39362f;
  background: rgba(244,240,232,.36);
  border-color: rgba(92,77,58,.48);
  backdrop-filter: blur(8px);
}

.opening > .enter-site:not(:disabled):hover {
  color: #39362f;
  background: rgba(255,253,247,.64);
}

.topbar {
  height: 68px;
  border: 0;
  padding: 0 3.4vw;
  background: linear-gradient(180deg, rgba(12,16,13,.2), transparent);
}

.light-ui .topbar {
  border: 0;
  background: linear-gradient(180deg, rgba(233,227,216,.92), rgba(233,227,216,0));
}

.brand i {
  border-color: currentColor;
  opacity: .72;
}

.brand b {
  font-weight: 400;
  letter-spacing: .18em;
}

.mini-consult {
  display: none;
}

.music-toggle {
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  opacity: .72;
}

.chapter {
  opacity: .62;
  letter-spacing: .26em;
}

.scene,
.scene.active,
.scene.departing {
  transform: none;
  transition: opacity 1.65s ease, visibility 0s 1.65s;
}

.scene.active {
  transition: opacity 1.65s ease;
}

.wipe,
.leaf-current {
  display: none !important;
}

.copy h1,
.copy h2 {
  font-weight: 400;
  letter-spacing: .015em;
}

.copy p {
  font-weight: 300;
}

.eyebrow {
  color: var(--gold);
  letter-spacing: .32em;
  opacity: .78;
}

.hero-copy h1 {
  line-height: 1.12;
}

.hero-copy .lead {
  max-width: 520px;
  color: rgba(246,241,231,.7);
}

.hero .actions button {
  min-height: 42px;
  box-shadow: none;
  font-weight: 300;
}

.side-note {
  display: none;
}

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

.reasons,
.collection,
.craft,
.set,
.ending {
  background: var(--paper);
}

.reasons .benefits article,
.craft-list button,
.set-copy li {
  border-color: rgba(48,56,47,.2);
}

.reasons .benefits h3,
.craft-list b,
.set-copy li b {
  font-weight: 400;
}

.reasons .benefits p,
.reason-lead,
.collection-copy > p:last-child,
.craft-answer p,
.set-copy li {
  color: rgba(48,56,47,.62);
}

.collection::before,
.craft::before,
.set::before {
  opacity: .42;
}

.collection .object-image {
  box-shadow: 0 18px 55px rgba(63,56,45,.1) !important;
  filter: saturate(.62) contrast(.96) !important;
}

.collection .object:hover .object-image {
  filter: saturate(.78) contrast(.98) !important;
  box-shadow: 0 22px 58px rgba(63,56,45,.15) !important;
}

.collection .object-info {
  color: #394038;
}

.collection .object-info small,
.collection .object-info em {
  color: rgba(57,64,56,.58);
}

.brewing .shade.soft {
  background: linear-gradient(270deg, rgba(16,13,9,.62), rgba(16,13,9,.18) 40%, transparent 70%);
}

.craft-media::after {
  background: linear-gradient(90deg, var(--paper), transparent 24%);
}

.lifestyle::after {
  background: linear-gradient(0deg, rgba(11,14,11,.64), transparent 44%), linear-gradient(90deg, rgba(11,14,11,.4), transparent 50%);
}

.occasion span {
  border-color: rgba(238,230,212,.52);
}

.set-photo::after {
  background: linear-gradient(0deg, var(--paper), transparent 38%);
}

.ending::before {
  animation: none;
  border-color: rgba(155,133,101,.2);
}

.ending-mark {
  color: rgba(137,114,77,.045);
}

.progress {
  left: 7vw;
  right: 26vw;
  bottom: 24px;
  opacity: .46;
}

.controls {
  right: 3.6vw;
  bottom: 28px;
  opacity: .7;
}

.controls button {
  width: 30px;
  height: 30px;
  border-color: currentColor;
}

.controls p small {
  opacity: .48;
}

.reactive-line:hover {
  filter: none;
  opacity: .78;
}

@media (max-width: 760px) {
  .topbar { height: 60px; }
  .progress { left: 18px; right: 150px; }
  .controls { right: 16px; }
  .opening > b { letter-spacing: .12em; }
}