:root {
  --ink: #28272a;
  --cream: #f5f0e8;
  --paper: #fcfaf5;
  --coral: #bd4c48;
  --coral-dark: #9f3d3a;
  --sage: #78806c;
  --line: #d9d1c6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
.hero { min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); overflow: hidden; background: var(--cream); position: relative; }
.hero__content { display: flex; flex-direction: column; justify-content: space-between; min-height: 720px; padding: 38px clamp(30px, 7vw, 112px) 35px; position: relative; z-index: 1; }
.hero__texture { position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(#aa9d8e 0.75px, transparent 0.75px); background-size: 8px 8px; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 11px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-decoration: none; }
.brand em { color: var(--coral); font-family: "Playfair Display", serif; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.brand__mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font-family: "Playfair Display", serif; font-size: 20px; font-style: italic; }
.hero__copy { max-width: 670px; margin: auto 0; padding: 80px 0 52px; }
.eyebrow { margin: 0 0 18px; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: "Playfair Display", serif; font-weight: 500; }
h1 { max-width: 700px; font-size: clamp(3.25rem, 6.2vw, 6.6rem); line-height: .99; letter-spacing: -.045em; }
h1 em, h2 em { color: var(--coral); font-weight: 500; }
.hero__intro { max-width: 490px; margin: 31px 0 30px; font-size: 16px; line-height: 1.75; }
.text-link { border-bottom: 1px solid var(--ink); color: var(--ink); display: inline-flex; gap: 30px; padding-bottom: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: color .2s, border-color .2s; }
.text-link:hover { border-color: var(--coral); color: var(--coral); }
.hero__footer { margin: 0; color: #716d68; font-size: 11px; letter-spacing: .04em; }
.hero__art { background: #c74e48; position: relative; min-height: 520px; overflow: hidden; }
.sun { background: #f0c997; border-radius: 50%; height: min(27vw, 370px); width: min(27vw, 370px); position: absolute; top: 10%; left: 15%; opacity: .94; }
.book { box-shadow: 17px 18px 22px rgba(54, 24, 21, .24); position: absolute; transform: rotate(-10deg); }
.book--back { background: #364441; height: 275px; width: 195px; left: 20%; bottom: 11%; }
.book--front { background: #f2e5d4; border-left: 10px solid #e4d1bb; color: #bd4c48; display: grid; height: 330px; place-items: center; text-align: center; width: 230px; left: 40%; bottom: 7%; }
.book--front span { border-bottom: 1px solid #bd4c48; border-top: 1px solid #bd4c48; font-family: "Playfair Display", serif; font-size: 38px; font-style: italic; line-height: 1.05; padding: 18px 2px; }
.leaf { border: 2px solid rgba(245,240,232,.75); border-radius: 100% 0 100% 0; height: 145px; position: absolute; width: 74px; }
.leaf--one { right: -5px; top: 5%; transform: rotate(36deg); }.leaf--two { bottom: -35px; right: 19%; transform: rotate(-19deg); }
.invitation { background: var(--paper); padding: 125px clamp(30px, 10vw, 170px) 105px; text-align: center; }
h2 { font-size: clamp(2.6rem, 4.5vw, 4.75rem); letter-spacing: -.04em; line-height: 1.08; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 85px auto 0; max-width: 960px; text-align: left; }
.step { border-top: 1px solid var(--line); padding-top: 21px; }.step span { color: var(--coral); font-family: "Playfair Display", serif; font-size: 16px; font-style: italic; }.step h3 { margin: 29px 0 9px; font-size: 26px; }.step p { color: #6d6964; font-size: 14px; line-height: 1.65; margin: 0; }
.registration { background: var(--ink); color: var(--cream); display: grid; gap: clamp(50px, 9vw, 160px); grid-template-columns: 1fr 1fr; padding: 105px clamp(30px, 10vw, 170px); }.registration .eyebrow { color: #ec9890; }.registration h2 { color: white; }.registration__heading > p:last-child { color: #d1cac1; font-size: 15px; line-height: 1.7; max-width: 400px; margin: 28px 0 0; }
.lead-form { max-width: 465px; width: 100%; }.field { margin-bottom: 22px; }.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; }.field input { background: transparent; border: 1px solid #78736d; border-radius: 0; color: white; font-family: inherit; font-size: 15px; outline: none; padding: 15px 16px; transition: border-color .2s; width: 100%; }.field input::placeholder { color: #aaa49c; }.field input:focus { border-color: #ec9890; }.field input[aria-invalid="true"] { border-color: #e97a70; }
.submit-button { background: var(--coral); border: 0; color: white; cursor: pointer; display: flex; font: 600 14px "DM Sans", sans-serif; justify-content: space-between; margin-top: 31px; padding: 17px 20px; transition: background .2s, transform .2s; width: 100%; }.submit-button:hover { background: var(--coral-dark); transform: translateY(-2px); }.submit-button:disabled { cursor: wait; opacity: .7; transform: none; }.form-note { color: #9f9991; font-size: 11px; line-height: 1.5; margin: 17px 0 0; }.form-message { font-size: 13px; line-height: 1.5; margin: 15px 0 0; min-height: 20px; }.form-message.success { color: #b8d0ad; }.form-message.error { color: #f0a19c; }
footer { align-items: center; background: var(--ink); border-top: 1px solid #454347; color: #a8a39c; display: flex; justify-content: space-between; padding: 25px clamp(30px, 7vw, 112px); }footer p { font-size: 11px; margin: 0; }.brand--footer { color: var(--cream); }.brand--footer .brand__mark { border-color: #ec9890; color: #ec9890; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; }.hero__content { min-height: 620px; padding: 26px 27px 28px; }.hero__copy { padding: 74px 0 52px; }.hero__art { min-height: 410px; }.sun { height: 285px; width: 285px; }.book--back { left: 17%; bottom: 9%; }.book--front { left: 37%; transform: rotate(-8deg) scale(.85); transform-origin: bottom left; }.invitation, .registration { padding: 84px 27px; }.steps, .registration { grid-template-columns: 1fr; }.steps { gap: 37px; margin-top: 58px; }.registration { gap: 50px; } footer { padding: 21px 27px; }.brand--footer { font-size: 10px; }.brand--footer .brand__mark { height: 27px; width: 27px; } }