:root {
  color-scheme: light;
  --cream: #f8f7f2;
  --ink: #3b3560;
  --purple: #6252bd;
  --pink: #9f52a0;
  --lime: #dae269;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 64px 24px;
  border-top: 5px solid var(--lime);
}

.layout { width: 100%; max-width: 1120px; display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: clamp(40px, 6vw, 88px); }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 220px 220px 24px 24px; }
.message { min-width: 0; width: 100%; text-align: left; }
.greeting { margin: 0 0 24px; font-size: 1rem; line-height: 1.6; color: var(--purple); }

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
h1 em { display: block; color: var(--pink); font-weight: 400; }
.intro {
  max-width: 470px;
  margin: 24px 0 0;
  font-size: 1.125rem;
  line-height: 1.75;
  text-wrap: pretty;
}
.intro strong { font-weight: 600; white-space: nowrap; }
.intro + .intro { margin-top: 12px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  max-width: 100%;
  margin-top: 38px;
  padding: 20px 34px;
  border-radius: 100px;
  background: var(--purple);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.065em;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.button:hover { background: var(--ink); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.note { margin: 23px auto 0; font-size: 0.875rem; line-height: 1.7; color: #726b83; }

@media (max-width: 760px) {
  .page { padding: 32px 24px 40px; }
  .layout { grid-template-columns: 1fr; gap: 24px; max-width: 500px; }
  .portrait { width: 180px; height: auto; margin: 0 auto; border-radius: 24px; }
  .message { text-align: center; }
  .greeting { margin-bottom: 18px; }
  h1 { font-size: clamp(2.25rem, 10.2vw, 3rem); line-height: 1.16; }
  .intro { margin: 20px auto 0; font-size: 1rem; max-width: 350px; }
  .button { width: 100%; max-width: 340px; padding: 20px 16px; margin-top: 32px; font-size: 0.8125rem; }
  .note { max-width: 285px; }
  .desktop-break { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}