/* Signed-in HERO: use the selected cover as a full-bleed backdrop. */
.hero .hero-art.hero-art-personal {
  display: block;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: 8px solid #29443b; /* Keep the deep green frame around the full personalized HERO. */
  box-shadow: inset 0 0 0 1px rgba(255, 250, 237, .58);
  height: clamp(400px, 38vw, 520px);
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.hero .hero-art .journal-leaf-personal {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero .hero-art .journal-leaf-personal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 250, 237, .10), transparent 46%, rgba(28, 48, 39, .10));
}

.hero .hero-art .hero-personal-cover-title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 6%;
  box-sizing: border-box;
  width: 37%;
  max-width: 220px;
  margin: 0;
  padding: clamp(12px, 2.2vw, 24px) 8px;
  transform: translateY(-50%);
  border: 1px solid rgba(120, 101, 71, .48);
  background: rgba(255, 251, 239, .91);
  color: #31473b;
  text-align: center;
  box-shadow: 0 5px 18px rgba(34, 43, 34, .18);
}

.hero .hero-art .hero-personal-cover-title small {
  display: block;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .06em;
}

.hero .hero-art .hero-personal-cover-name {
  display: block;
  margin: 10px 0;
  font: 500 clamp(17px, 2vw, 27px)/1.55 "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .07em;
}

.hero .hero-art .hero-personal-cover-name-line {
  display: inline-block;
  white-space: nowrap;
}

.hero .hero-art .hero-personal-cover-seal {
  display: inline-block;
  color: #a34236;
  font: 12px/1.7 "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .13em;
}

.hero .hero-art.hero-art-personal > .hero-art-motto,
.hero .hero-art.hero-art-personal > .hero-round-seal {
  display: none;
}

.hero .hero-art.hero-art-personal > .journal-spine {
  z-index: 2;
  border-left-color: rgba(214, 203, 174, .72);
  border-right-color: rgba(22, 43, 38, .48);
}

.hero .hero-art.hero-art-personal > .journal-work {
  position: absolute;
  z-index: 3;
  top: 10%;
  right: 6%;
  bottom: 12%;
  left: auto;
  display: flex;
  box-sizing: border-box;
  width: 47%;
  min-height: 0;
  margin: 0;
  padding: 5% 4% 3%;
  overflow: hidden;
  border: 1px solid rgba(144, 130, 105, .58);
  border-radius: 2px;
  background: rgba(255, 253, 247, .93);
  box-shadow: 0 9px 24px rgba(31, 40, 34, .22), inset 5px 0 12px rgba(45, 64, 63, .05);
}

.hero .hero-art.hero-art-personal > .journal-work .paper-index {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0 0 7px;
  font-size: clamp(9px, 1vw, 12px);
}

.hero .hero-art.hero-art-personal > .journal-work img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}

.hero .hero-art.hero-art-personal > .journal-work .art-caption {
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: #4e5148;
  font-size: clamp(8px, .9vw, 11px);
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero .hero-art.hero-art-personal .hero-ar-phone {
  z-index: 5;
  right: -10%;
  bottom: -9%;
  width: 24%;
  max-width: 145px;
}

.hero .hero-art.hero-art-personal > .ar-tag {
  z-index: 6;
}

@media (max-width: 700px) {
  .hero .hero-art.hero-art-personal {
    height: clamp(330px, 100vw, 405px);
    min-height: 0;
    aspect-ratio: auto;
  }

  .hero .hero-art .hero-personal-cover-title {
    left: 5%;
    width: 41%;
    padding: 12px 4px;
  }

  .hero .hero-art .hero-personal-cover-name {
    margin: 7px 0;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.5;
    letter-spacing: .01em;
  }

  .hero .hero-art .hero-personal-cover-title small {
    font-size: clamp(8px, 2.5vw, 10px);
    letter-spacing: 0;
  }

  .hero .hero-art .hero-personal-cover-seal {
    font-size: 10px;
  }

  .hero .hero-art.hero-art-personal > .journal-work {
    top: 50%;
    right: 5%;
    bottom: auto;
    width: 48%;
    height: auto;
    padding: 2% 2% 1%;
    transform: translateY(-50%);
  }

  .hero .hero-art.hero-art-personal > .journal-work .paper-index {
    margin-bottom: 2px;
    font-size: 9px;
  }

  .hero .hero-art.hero-art-personal > .journal-work .art-caption {
    margin-top: 4px;
    font-size: 8px;
  }

  .hero .hero-art.hero-art-personal .hero-ar-phone {
    right: -11%;
    bottom: -9%;
    width: 23%;
    max-width: 105px;
  }
}

@media (max-width: 380px) {
  .hero .hero-art.hero-art-personal {
    height: 330px;
  }

  .hero .hero-art .hero-personal-cover-name {
    font-size: 15px;
  }

  .hero .hero-art.hero-art-personal > .journal-work {
    right: 4%;
    width: 49%;
  }
}