.about-theme-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(78, 50, 32, 0.16), rgba(78, 50, 32, 0) 42%),
    linear-gradient(180deg, #18110d 0%, #110c09 100%);
  transition: none !important;
}

.about-theme-card-overlay.is-active {
  display: flex;
}

.about-theme-card-overlay::before,
.about-theme-card-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-theme-card-overlay::before {
  opacity: 0.16;
  background:
    linear-gradient(
      180deg,
      rgba(255, 241, 219, 0.045) 0,
      rgba(255, 241, 219, 0.045) 1px,
      transparent 1px,
      transparent 4px
    );
}

.about-theme-card-overlay::after {
  opacity: 0.08;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 244, 230, 0.32) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 70% 50%, rgba(255, 244, 230, 0.24) 0 0.8px, transparent 1px),
    radial-gradient(circle at 35% 78%, rgba(255, 244, 230, 0.26) 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 88% 22%, rgba(255, 244, 230, 0.16) 0 0.8px, transparent 1px);
  background-size: 160px 140px, 210px 190px, 190px 170px, 240px 220px;
}

.about-theme-card {
  position: relative;
  display: none;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 2.3vw, 38px);
  width: min(72vw, 780px);
  max-width: 780px;
  min-height: min(58vh, 520px);
  padding: clamp(22px, 4vw, 42px) clamp(12px, 2vw, 24px);
  color: rgba(244, 235, 220, 0.96);
  transition: none !important;
}

.about-theme-card-overlay.is-card-visible .about-theme-card {
  display: flex;
}

.about-theme-card__line,
.about-theme-card__title {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(255, 248, 240, 0.4),
    0 3px 18px rgba(0, 0, 0, 0.32);
  transition: none !important;
}

.about-theme-card__title {
  align-self: center;
  font-size: clamp(54px, 8vw, 96px);
  letter-spacing: 0.11em;
  color: rgba(248, 241, 230, 0.98);
}

.about-theme-card__line {
  font-size: clamp(14px, 1.5vw, 19px);
  color: rgba(220, 205, 187, 0.84);
}

.about-theme-card__line--far-right {
  margin-top: clamp(8px, 2vh, 18px);
}

.about-theme-card__line--right {
  margin-top: clamp(34px, 8vh, 76px);
}

.about-theme-card__line--left {
  margin-top: clamp(52px, 12vh, 118px);
}

@media (max-width: 720px) {
  .about-theme-card {
    width: min(88vw, 560px);
    min-height: min(54vh, 420px);
    gap: clamp(8px, 1.8vw, 16px);
    padding: 18px 8px;
  }

  .about-theme-card__title {
    font-size: clamp(40px, 11vw, 64px);
  }

  .about-theme-card__line {
    font-size: clamp(12px, 2.8vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-theme-card-overlay,
  .about-theme-card,
  .about-theme-card__line,
  .about-theme-card__title {
    transition: none !important;
    animation: none !important;
  }
}