:root {
  --bg: #f8f4ed;
  --bg-soft: #fbf8f2;
  --ink: #22242b;
  --copy: #48433e;
  --gold: #b89456;
  --gold-soft: rgba(184, 148, 86, 0.26);
  --gold-faint: rgba(184, 148, 86, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.96), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(189, 160, 108, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 241, 231, 0.92)),
    var(--bg);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
}

body::before {
  opacity: 0.16;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8), transparent 18%),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.55), transparent 22%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.48), transparent 24%);
  filter: blur(28px);
}

body::after {
  opacity: 0.075;
  background-image:
    linear-gradient(0deg, transparent 0%, rgba(126, 100, 57, 0.16) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.35) 0,
      rgba(255, 255, 255, 0.35) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: multiply;
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 84px 24px 64px;
  text-align: center;
  transform: translateY(18px);
}

.brand-logo {
  display: block;
  width: min(68vw, 620px);
  height: auto;
  margin-bottom: 10px;
}

.lead {
  margin: 0;
}

.ja {
  margin-top: 26px;
  color: var(--copy);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.24rem, 2.7vw, 2.1rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: 0.1em;
}

.divider {
  width: min(68px, 18vw);
  height: 2px;
  margin: 30px auto 30px;
  background: var(--gold);
}

.en {
  color: rgba(157, 124, 72, 0.95);
  font-size: clamp(1.3rem, 1.82vw, 1.72rem);
  letter-spacing: 0.14em;
  line-height: 1.55;
}

.domain {
  margin: 62px 0 0;
  color: var(--ink);
  font-size: clamp(1.28rem, 1.72vw, 1.76rem);
  letter-spacing: 0.36em;
  text-indent: 0.36em;
}

.background-orb,
.ring {
  position: absolute;
  pointer-events: none;
}

.background-orb {
  filter: blur(2px);
  opacity: 0.7;
}

.orb-left {
  left: -12vw;
  bottom: 0;
  width: 42vw;
  height: 34vh;
  background:
    radial-gradient(circle at 40% 100%, rgba(222, 190, 141, 0.2), transparent 54%),
    linear-gradient(12deg, rgba(224, 206, 173, 0.26), transparent 55%);
  transform: rotate(-10deg);
}

.orb-right {
  right: -8vw;
  bottom: -2vh;
  width: 38vw;
  height: 26vh;
  background:
    radial-gradient(circle at 85% 100%, rgba(222, 190, 141, 0.18), transparent 56%),
    linear-gradient(-18deg, rgba(224, 206, 173, 0.22), transparent 58%);
  transform: rotate(4deg);
}

.ring {
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
}

.ring-top-right.ring-large {
  top: -19vw;
  right: -10vw;
  width: 33vw;
  aspect-ratio: 1;
}

.ring-top-right.ring-small {
  top: 20vh;
  right: 7vw;
  width: 19vw;
  aspect-ratio: 1;
}

.ring-top-right.ring-small::after {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 14px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: rgba(206, 167, 92, 0.9);
  transform: translate(-50%, -50%);
}

.ring-bottom-left.ring-large {
  left: -12vw;
  bottom: -18vw;
  width: 39vw;
  aspect-ratio: 1;
}

.ring-bottom-left.ring-small {
  left: -7vw;
  bottom: 17vh;
  width: 21vw;
  aspect-ratio: 1;
}

.ring-bottom-left.ring-small::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 14px;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: rgba(206, 167, 92, 0.9);
  transform: translate(50%, -50%);
}

.ring-bottom-center {
  left: 50%;
  bottom: -42vh;
  width: 118vw;
  height: 78vh;
  border-color: rgba(255, 255, 255, 0.72);
  transform: translateX(-50%) rotate(-4deg);
}

@media (max-width: 900px) {
  .hero {
    padding: 64px 20px 48px;
    transform: translateY(10px);
  }

  .ja {
    margin-top: 24px;
    line-height: 1.8;
  }

  .divider {
    margin: 26px auto 24px;
  }

  .domain {
    margin-top: 50px;
  }

  .ring-top-right.ring-large,
  .ring-bottom-left.ring-large {
    width: 46vw;
  }

  .ring-top-right.ring-small,
  .ring-bottom-left.ring-small {
    width: 28vw;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 36px 18px 30px;
    transform: none;
  }

  .brand-logo {
    width: min(82vw, 320px);
    max-width: calc(100vw - 36px);
    margin-bottom: 6px;
  }

  .ja {
    margin-top: 20px;
    max-width: min(15em, calc(100vw - 44px));
    font-size: clamp(0.94rem, 4.45vw, 1.12rem);
    line-height: 1.85;
    letter-spacing: 0.02em;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .ja br {
    display: none;
  }

  .en {
    max-width: min(14em, calc(100vw - 56px));
    font-size: clamp(0.92rem, 4vw, 1.08rem);
    line-height: 1.7;
    letter-spacing: 0.05em;
  }

  .domain {
    max-width: calc(100vw - 56px);
    margin-top: 38px;
    font-size: clamp(0.94rem, 4vw, 1.08rem);
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  .orb-left {
    width: 60vw;
    height: 24vh;
  }

  .orb-right {
    width: 52vw;
    height: 18vh;
  }

  .ring-top-right.ring-large {
    top: -10vw;
    right: -26vw;
    width: 62vw;
  }

  .ring-top-right.ring-small {
    top: 16vh;
    right: -10vw;
    width: 36vw;
  }

  .ring-bottom-left.ring-large {
    left: -30vw;
    bottom: -20vw;
    width: 70vw;
  }

  .ring-bottom-left.ring-small {
    left: -16vw;
    bottom: 18vh;
    width: 40vw;
  }

  .ring-top-right.ring-small::after,
  .ring-bottom-left.ring-small::after {
    width: 10px;
  }

  .ring-bottom-center {
    width: 160vw;
    height: 48vh;
    bottom: -20vh;
  }
}