/* 最终黑金主题层：保持在所有组件样式之后加载。 */
.guan-feature {
  background:
    linear-gradient(90deg, rgba(188, 148, 78, .05) 1px, transparent 1px),
    #11100d;
  background-size: 90px 100%;
}

.guan-intro h2 {
  color: #eadbc2;
}

.guan-intro > p:not(.eyebrow) {
  color: #9c9182;
}

.guan-intro > span {
  color: #a8874e;
}

.guan-photo {
  border: 1px solid rgba(211, 181, 124, .15);
  box-shadow: 0 22px 65px rgba(0, 0, 0, .3);
}

.juice-feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto 330px;
  gap: 16px;
  padding: 120px 5vw;
  background:
    radial-gradient(circle at 12% 14%, rgba(192, 166, 32, .11), transparent 24%),
    #090a07;
}

.kyoto-feature {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 16px;
  padding: 120px 5vw;
  background:
    radial-gradient(circle at 82% 18%, rgba(166, 62, 35, .1), transparent 24%),
    #0b0908;
}

.kyoto-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw;
}

.kyoto-copy h2 {
  margin: 14px 0 28px;
  color: #eadfce;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.kyoto-copy > p:not(.eyebrow) {
  max-width: 450px;
  color: #9c9182;
  font: 400 15px/2 "Noto Serif SC";
}

.kyoto-copy > span {
  margin-top: 38px;
  color: #b18a4d;
  font: 400 11px "Noto Serif SC";
  letter-spacing: .18em;
}

.kyoto-shot {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 169, 106, .16);
  background: #111;
}

.kyoto-hero {
  grid-row: span 2;
  min-height: 640px;
}

.kyoto-wide {
  grid-column: 1 / -1;
  min-height: 420px;
}

.kyoto-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.kyoto-shot:hover img {
  transform: scale(1.025);
}

.kyoto-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #f0e6d5;
  background: linear-gradient(transparent, rgba(0, 0, 0, .74));
  font-size: 9px;
  letter-spacing: .18em;
}

.banzen-feature {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 16px;
  padding: 120px 5vw;
  background:
    linear-gradient(135deg, rgba(133, 35, 24, .08), transparent 35%),
    #0b0908;
}

.tan-feature {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 16px;
  padding: 120px 5vw;
  background:
    radial-gradient(circle at 76% 28%, rgba(155, 49, 24, .11), transparent 26%),
    linear-gradient(145deg, #080706, #120b08);
}

.dali-feature {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 16px;
  padding: 120px 5vw;
  background:
    radial-gradient(circle at 82% 20%, rgba(67, 115, 136, .16), transparent 28%),
    linear-gradient(150deg, #080b0c, #101819);
}

.brunch-feature {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 16px;
  padding: 120px 5vw;
  background:
    radial-gradient(circle at 76% 22%, rgba(196, 132, 57, .13), transparent 26%),
    linear-gradient(150deg, #0d0b08, #181109);
}

.brunch-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw;
}

.brunch-copy h2 {
  margin: 14px 0 28px;
  color: #eee0c6;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.brunch-copy > p:not(.eyebrow) {
  max-width: 470px;
  color: #a29482;
  font: 400 15px/2 "Noto Serif SC";
}

.brunch-copy > span {
  margin-top: 38px;
  color: #c28c4a;
  font-size: 9px;
  letter-spacing: .2em;
}

.brunch-shot {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 157, 83, .2);
  background: #120d08;
}

.brunch-hero {
  grid-row: span 2;
  min-height: 640px;
}

.brunch-wide {
  grid-column: 1 / -1;
  min-height: 420px;
}

.brunch-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.brunch-shot:hover img {
  transform: scale(1.025);
}

.brunch-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #f4e7d2;
  background: linear-gradient(transparent, rgba(0, 0, 0, .74));
  font-size: 9px;
  letter-spacing: .18em;
}

.dali-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw;
}

.dali-copy h2 {
  margin: 14px 0 28px;
  color: #e4e1d7;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.dali-copy > p:not(.eyebrow) {
  max-width: 460px;
  color: #8f9a98;
  font: 400 15px/2 "Noto Serif SC";
}

.dali-copy > span {
  margin-top: 38px;
  color: #789fac;
  font-size: 9px;
  letter-spacing: .22em;
}

.dali-shot {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(119, 165, 179, .2);
  background: #0d1415;
}

.dali-hero {
  grid-row: span 2;
  min-height: 640px;
}

.dali-wide {
  grid-column: 1 / -1;
  min-height: 420px;
}

.dali-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.dali-shot:hover img {
  transform: scale(1.025);
}

.dali-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #eef0eb;
  background: linear-gradient(transparent, rgba(0, 0, 0, .74));
  font-size: 9px;
  letter-spacing: .18em;
}

.tan-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw;
}

.tan-copy h2 {
  margin: 14px 0 28px;
  color: #ead9c4;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.tan-copy > p:not(.eyebrow) {
  max-width: 450px;
  color: #9b8d80;
  font: 400 15px/2 "Noto Serif SC";
}

.tan-copy > span {
  margin-top: 38px;
  color: #b2704c;
  font: 400 11px "Noto Serif SC";
  letter-spacing: .18em;
}

.tan-shot {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(191, 116, 75, .2);
  background: #100b08;
}

.tan-hero {
  grid-row: span 2;
  min-height: 640px;
}

.tan-wide {
  grid-column: 1 / -1;
  min-height: 420px;
}

.tan-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.tan-shot:hover img {
  transform: scale(1.025);
}

.tan-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #f0e2d2;
  background: linear-gradient(transparent, rgba(0, 0, 0, .76));
  font-size: 9px;
  letter-spacing: .18em;
}

.banzen-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw;
}

.banzen-copy h2 {
  margin: 14px 0 28px;
  color: #eadfce;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.banzen-copy > p:not(.eyebrow) {
  max-width: 440px;
  color: #9c9182;
  font: 400 15px/2 "Noto Serif SC";
}

.banzen-copy > span {
  margin-top: 38px;
  color: #9f7d49;
  font: 400 11px "Noto Serif SC";
  letter-spacing: .2em;
}

.banzen-shot {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 169, 106, .16);
  background: #111;
}

.banzen-hero {
  grid-row: span 2;
  min-height: 640px;
}

.banzen-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.banzen-shot:hover img {
  transform: scale(1.025);
}

.banzen-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #f0e6d5;
  background: linear-gradient(transparent, rgba(0, 0, 0, .74));
  font-size: 9px;
  letter-spacing: .18em;
}

.juice-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3vw 5vw;
  border: 1px solid rgba(209, 180, 63, .2);
  background: linear-gradient(140deg, rgba(190, 156, 26, .08), rgba(27, 46, 20, .13));
}

.juice-copy h2 {
  margin: 14px 0 28px;
  color: #eee4c8;
  font: 600 clamp(40px, 5vw, 72px)/1.25 "Noto Serif SC";
}

.juice-copy > p:last-child {
  max-width: 470px;
  color: #988f7e;
  font: 400 14px/1.9 "Noto Serif SC";
}

.juice-promises {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  color: #d4c69a;
  font: 500 16px "Noto Serif SC";
}

.juice-promises b {
  margin-right: 4px;
  color: #d5ba3f;
  font: 500 34px "DM Sans";
}

.juice-promises i {
  width: 1px;
  height: 26px;
  background: rgba(213, 186, 63, .32);
}

.juice-shot {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 181, 124, .14);
  background: #111;
}

.juice-store {
  grid-row: span 2;
}

.juice-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.juice-shot:hover img {
  transform: scale(1.025);
}

.juice-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px;
  color: #f3ead0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  font-size: 9px;
  letter-spacing: .18em;
}

@media (max-width: 800px) {
  .kyoto-feature {
    display: block;
    padding: 80px 20px;
  }

  .kyoto-copy {
    padding: 20px 0 50px;
  }

  .kyoto-shot,
  .kyoto-hero,
  .kyoto-wide {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .banzen-feature {
    display: block;
    padding: 80px 20px;
  }

  .tan-feature {
    display: block;
    padding: 80px 20px;
  }

  .dali-feature {
    display: block;
    padding: 80px 20px;
  }

  .brunch-feature {
    display: block;
    padding: 80px 20px;
  }

  .brunch-copy {
    padding: 20px 0 50px;
  }

  .brunch-shot,
  .brunch-hero,
  .brunch-wide {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .dali-copy {
    padding: 20px 0 50px;
  }

  .dali-shot,
  .dali-hero,
  .dali-wide {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .tan-copy {
    padding: 20px 0 50px;
  }

  .tan-shot,
  .tan-hero,
  .tan-wide {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .banzen-copy {
    padding: 20px 0 50px;
  }

  .banzen-shot,
  .banzen-hero {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .juice-feature {
    display: block;
    padding: 80px 20px;
  }

  .juice-copy,
  .juice-shot {
    min-height: 300px;
    margin-bottom: 14px;
  }

  .juice-copy {
    padding: 40px 24px;
  }

  .juice-promises {
    gap: 11px;
  }
}