:root {
  color-scheme: light;
  --background: #f5eae3;
  --headline: #802831;
  --body-text: #695953;
  --ornament: #ac6b6b;
  --ornament-line: #c79287;
  font-family: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { margin: 0; }
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: var(--background);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: min(55%, 780px);
  padding: clamp(32px, 7vw, 120px);
}
h1 {
  margin: 0 0 30px;
  color: var(--headline);
  font-size: clamp(3.6rem, 6.7vw, 7.5rem);
  line-height: .94;
  font-weight: 400;
  letter-spacing: -.055em;
}
p {
  max-width: 560px;
  margin: 0;
  color: var(--body-text);
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  line-height: 1.5;
}
.hero__ornament {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(220px, 65%);
  margin-top: 44px;
  color: var(--ornament);
  font-size: 22px;
}
.hero__ornament::before,
.hero__ornament::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--ornament-line);
}
.hero__flowers {
  position: absolute;
  right: 0;
  bottom: -80px;
  width: min(64vw, 1050px);
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero { flex-direction: column; justify-content: flex-end; }
  .hero__flowers {
    top: 0;
    right: -24%;
    bottom: auto;
    width: 134%;
    max-height: 60svh;
    object-fit: contain;
    object-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
  }
  .hero__content {
    width: 100%;
    margin-top: max(48svh, 270px);
    padding: 0 25px 48px;
    text-align: center;
  }
  h1 { margin-bottom: 20px; font-size: clamp(3.2rem, 12vw, 5.2rem); }
  p { margin-inline: auto; font-size: clamp(1rem, 4vw, 1.2rem); }
  .hero__ornament { margin: 26px auto 0; }
}
@media (max-width: 380px) {
  .hero__flowers { right: -28%; width: 138%; }
  .hero__content { margin-top: max(43svh, 230px); }
}