@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

/* Follow-up refinements: keep the handwritten accent fully visible and preserve the portrait's forehead. */
.hero-tight { display: inline-block; margin-left: -.36em; }
.hero__message {
  z-index: 3;
  right: 1.5%;
  width: 245px;
  padding: 0;
  background: transparent;
  border: 0;
  clip-path: none;
  box-shadow: none;
  transform: rotate(-7deg);
  color: #17242c;
  font-family: "Yomogi", "Hiragino Maru Gothic ProN", cursive;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 5px #fff;
}
.hero__message span { display: block; white-space: nowrap; }

@media (min-width: 721px) {
  .hero h1 { font-size: clamp(36px, 2.9vw, 50px); }
  .hero-title-line { white-space: nowrap; }
  .about h2 { font-size: clamp(28px, 2.35vw, 36px); }
  .about-title-line { white-space: nowrap; }
}

.profile-reading {
  margin-left: .55em;
  color: var(--muted);
  font-size: .36em;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: middle;
}

.profile-photo {
  height: 540px;
  overflow: hidden;
}

.profile-photo img {
  width: 110%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  transform: translateX(-9%);
}

.plan-note span + span { margin-left: 2em; }

@media (max-width: 720px) {
  .hero__message { display: none; }
  .hero h1 {
    font-size: clamp(20px, 6.25vw, 24px);
    letter-spacing: -.055em;
  }
  .hero-title-line,
  .about-title-line,
  .contact-title-line,
  .area-online { white-space: nowrap; }
  .about h2 {
    font-size: clamp(18px, 5.8vw, 24px);
    letter-spacing: 0;
  }
  .contact h2 {
    font-size: clamp(20px, 6.25vw, 24px);
    letter-spacing: -.055em;
  }
  .actions { flex-direction: column; }
  .actions .button { flex: none; width: 100%; }
  .plan-note span { display: block; white-space: nowrap; }
  .plan-note span + span { margin: .15em 0 0; }
  .profile-photo { height: auto; aspect-ratio: 4 / 5; }
  .profile-photo img { width: 100%; transform: none; object-position: center 8%; }
}