/* 第1案の写真と組版に、第2案の月の意匠を重ねる。 */
.sky {
  background:
    radial-gradient(ellipse at 18% 46%, #344b7852, transparent 47%),
    radial-gradient(ellipse at 79% 52%, #536eab29, transparent 51%),
    linear-gradient(#0b132b52, #0b132ba3),
    url("images/sky.webp") center 39% / cover;
}

.hero {
  overflow: hidden;
  gap: clamp(238px, 68vw, 326px);
  padding: 34px clamp(22px, 5.8vw, 30px) 33px;
  text-align: center;
}
.hero-image {
  background:
    linear-gradient(180deg, #0b132b 0%, #0b132be3 14%, #0b132b33 40%, #0b132b12 63%, #0b132bad 77%, var(--sky) 91%),
    url("images/pour.webp") center 59% / 100% auto no-repeat;
}
.hero-frame {
  inset: 12px;
  border-color: #e5b85c27;
}
.hero-orbit {
  position: absolute;
  top: 45%;
  left: 10%;
  z-index: -1;
  width: 82%;
  aspect-ratio: 3.8;
  transform: rotate(-25deg);
  border: 1px solid #e5b85c97;
  border-top-color: #e5b85c38;
  border-radius: 50%;
  pointer-events: none;
}
.hero-orbit::after {
  position: absolute;
  top: 41%;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe2a5;
  box-shadow: 0 0 11px 2px #e5b85c8c;
  content: "";
}
.hero .brand { font-size: 17px; }
.emblem {
  border: 0;
  box-shadow: inset 6px -1px 0 -3px currentColor;
  transform: rotate(-24deg);
}
.emblem::before, .emblem::after {
  inset: 3px 4px auto auto;
  width: 2px;
  height: 10px;
}
.hero h1 {
  margin-top: 24px;
  font-size: clamp(21px, 6.65vw, 30px);
  line-height: 1.55;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hero h1 span { color: #f2d192; }
.hero-bottom { width: min(100%, 350px); margin-inline: auto; }
.hero-bottom p { color: #e4e9f2; text-wrap: pretty; }
.phrase { white-space: nowrap; }
.cta {
  min-height: 58px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, #fff6d84d, transparent 33%, transparent 64%, #85501429),
    linear-gradient(115deg, #D4AF37, #F3C65F);
  box-shadow:
    inset 0 1px #fff2c5b3,
    inset -1px -2px 5px #ffe9a65c,
    0 5px 14px #080d20a6;
  font-size: clamp(12px, 3.28vw, 13px);
}

.thread { position: relative; height: 48px; }
.thread::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  content: "";
}
.concept {
  background: radial-gradient(ellipse at 51% 26%, #2e4371b0, transparent 60%), var(--panel);
}
.concept-photo, .concept-photo::after {
  border-radius: 80px 80px 3px 3px;
}
.concept-photo-crop {
  overflow: hidden;
  border-radius: inherit;
}
.concept-photo img {
  aspect-ratio: 1.82;
  object-position: 50% 88%;
  transform: scale(1.23);
  transform-origin: right center;
}
.concept-text p { text-wrap: pretty; }

.feature {
  overflow: hidden;
  border-radius: 0 26px 2px 2px;
}
.feature-number { border-radius: 0 10px 0 0; }
.feature > img { aspect-ratio: 2.45; }
.feature > img.amber-photo { object-position: center 33%; }
.feature p { text-wrap: pretty; }

.lineup {
  background: radial-gradient(ellipse at 60% 17%, #304772 0%, transparent 64%), var(--panel);
}
.flavor { border-radius: 0 35px 2px 2px; }
.flavor-photo {
  overflow: hidden;
  aspect-ratio: 1.9;
}
.flavor-photo img {
  height: 100%;
  aspect-ratio: auto;
  mask-image: linear-gradient(90deg, transparent 12%, #000 56%);
}
.flavor-new img {
  object-position: center 57%;
  transform: translateX(4%) scale(1.22);
}
.flavor-full img {
  width: 90%;
  margin-inline-start: 22%;
  object-position: center 61%;
  mask-image: linear-gradient(90deg, transparent, #000 32%);
}
.moon {
  inset: 50% auto auto 17px;
  width: clamp(56px, 20.5vw, 88px);
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  box-shadow: 0 0 22px #a0b5ef20;
}
.moon-new {
  background: var(--sky) url("images/crescent-moon.webp") 50% 51.2% / 2280% auto no-repeat;
}
.moon-full { background-position: 43.9% 37.8%; background-size: 400% auto; }
.flavor-copy { padding-inline: 18px; }

@media (max-width: 345px) {
  .hero { padding-inline: 17px; }
}
@media (min-width: 860px) {
  .brand-large .emblem::before, .brand-large .emblem::after { inset: 4px 6px auto auto; }
  .desktop-menu a::before {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border: 1px solid var(--border);
    background: transparent;
  }
}