:root {
	--canvas: #f8f8f5;
	--ink: #232522;
	--muted: #626760;
	--line: #c8cbc5;
	--plum: #4e3450;
	--olive: #646144;
	--olive-wash: #e7e6db;
	--paynes-blue: #526a70;
	--heading: #3f4642;
	--ochre: #c79528;
	--sienna: #9b3f26;
	--page-pad: clamp(1rem, 5vw, 6rem);
	--section-space: clamp(3.75rem, 5.5vw, 5.5rem);
}

body { background: var(--canvas); color: var(--ink); font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
.site-header, footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.15rem clamp(1rem, 3vw, 3rem); background: var(--plum); color: #fff; }
.site-header { min-height: 5rem; }
.header-name, .footer-name { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1rem; font-weight: 700; text-decoration: none; }
.header-name > span { width: 1.6rem; height: 1px; background: currentColor; }
.site-header p, footer p, footer > a:not(.footer-name) { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.035em; }
.site-header a:hover, .site-header a:focus-visible, footer a:hover, footer a:focus-visible { text-decoration: underline; text-underline-offset: 0.35rem; }
.site-header a:focus-visible, footer a:focus-visible { outline: 2px solid #fff; }
.section-label { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.055em; line-height: 1.4; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 { margin: 0; color: var(--heading); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
h1 { font-size: clamp(3.7rem, 5.7vw, 6rem); }
h2 { font-size: clamp(2.35rem, 3.25vw, 3.5rem); }
.text-link { display: inline-flex; justify-content: space-between; gap: 2rem; padding-bottom: 0.25rem; border-bottom: 1px solid currentColor; font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.text-link:hover, .text-link:focus-visible { color: var(--plum); }

.invitation-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.85fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); padding: clamp(3rem, 5vw, 5.5rem) var(--page-pad); border-bottom: 1px solid var(--line); }
.intro-copy { max-width: 52rem; }
.intro-copy .section-label { margin-bottom: 1.5rem; }
.intro-copy .lead { max-width: 39rem; margin: 2.2rem 0; font-size: clamp(1.08rem, 1.55vw, 1.35rem); }
.invitation-intro figure { justify-self: end; width: min(100%, 32rem); margin: 0; }
.invitation-intro .image-frame { height: clamp(19rem, 26vw, 25rem); overflow: hidden; }
.invitation-intro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(0.66) contrast(0.98); }
.invitation-intro figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.72rem; }

.jewelry-glimpse { padding: var(--section-space) var(--page-pad); border-bottom: 1px solid var(--line); }
.jewelry-glimpse header { display: grid; grid-template-columns: 0.4fr 1.1fr 0.65fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.jewelry-glimpse .section-label { align-self: start; }
.jewelry-glimpse header > div p { max-width: 28rem; margin: 0; color: var(--muted); }
.glimpse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.65rem, 1.35vw, 1.25rem); max-width: 70rem; margin: clamp(2.75rem, 4vw, 4rem) 0 0 auto; }
.glimpse-image { aspect-ratio: 3 / 4; overflow: hidden; background: #e8e7e1; }
.glimpse-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.74) contrast(0.98); }
.glimpse-image-one img { object-position: 50% 72%; }
.glimpse-image-two img { transform: scale(1.23); transform-origin: 34% 76%; }
.glimpse-image-three img { transform: scale(1.48); transform-origin: 66% 78%; }
.source-note { max-width: 70rem; margin: 0.8rem 0 0 auto; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }

.reassurance { display: grid; grid-template-columns: 0.4fr 1.25fr 0.6fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: var(--section-space) var(--page-pad); }
.reassurance > div p { max-width: 42rem; margin: 2rem 0 0; }
.reassurance aside { align-self: end; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 2px solid var(--line); }
.reassurance aside strong { display: block; font-size: 1rem; line-height: 1.45; }
.reassurance aside p { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.78rem; }

.preparation { padding: var(--section-space) var(--page-pad); border-block: 1px solid var(--line); background: var(--olive-wash); }
.preparation header { display: grid; grid-template-columns: 0.4fr 1.6fr; gap: 2rem; margin-bottom: clamp(3rem, 4.5vw, 4.75rem); }
.preparation-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.preparation article { padding: 1.3rem clamp(1.2rem, 2.5vw, 2.5rem) 2.25rem 0; }
.preparation article + article { padding-left: clamp(1.2rem, 2.5vw, 2.5rem); border-left: 1px solid var(--line); }
.preparation h3 { margin: 2.25rem 0 1rem; font-size: clamp(1.5rem, 1.9vw, 2rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.1; }
.preparation article p { max-width: 23rem; margin: 0; color: var(--muted); }

.photo-guide { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(22rem, 1.1fr) minmax(12rem, 0.5fr); align-items: stretch; gap: clamp(2rem, 5vw, 5rem); padding: var(--section-space) var(--page-pad); }
.photo-guide figure { margin: 0; }
.photo-guide .image-frame { overflow: hidden; }
.photo-guide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.02); }
.portrait-example { align-self: center; }
.portrait-example .image-frame { height: clamp(29rem, 40vw, 38rem); }
.portrait-example img { object-position: 50% 44%; }
.photo-copy { padding-top: clamp(0rem, 4vw, 4rem); }
.photo-copy .section-label { margin-bottom: 1.5rem; }
.photo-copy ul { margin: 2.3rem 0 0; padding: 0; list-style: none; }
.photo-copy li { padding: 1rem 0; border-top: 1px solid var(--line); }
.photo-copy li:last-child { border-bottom: 1px solid var(--line); }
.photo-copy strong { color: var(--plum); }
.earrings-example { align-self: end; }
.earrings-example .image-frame { height: clamp(15rem, 20vw, 19rem); }
.earrings-example figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.7rem; }

.story-intake { padding: var(--section-space) var(--page-pad); border-top: 1px solid var(--line); }
.form-intro { display: grid; grid-template-columns: 0.4fr 1fr 0.6fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 4.5vw, 5rem); }
.form-intro p:last-child { margin: 0; }
form { max-width: 78rem; margin-left: auto; }
.form-section { margin: 0; padding: clamp(2.5rem, 4vw, 3.75rem) 0; border: 0; border-top: 1px solid var(--ink); }
.form-section legend { float: left; width: 100%; margin: 0 0 2.1rem; padding: 0; font-size: clamp(1.8rem, 2.55vw, 2.65rem); font-weight: 400; letter-spacing: -0.05em; line-height: 1.05; }
.form-section legend + * { clear: both; }
.section-help { max-width: 43rem; margin: 0 0 3rem; color: var(--muted); }
.field-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { margin-bottom: 2.4rem; }
.field label { display: block; margin-bottom: 0.65rem; font-size: 0.82rem; font-weight: 700; }
.field label span { color: var(--plum); font-size: 0.72rem; font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea { width: 100%; min-height: 3.2rem; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); }
.field textarea { min-height: 12rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field input[type="file"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; }
.field small { display: block; margin-top: 0.6rem; color: var(--muted); font-size: 0.72rem; }
.prompt-field { display: grid; grid-template-columns: minmax(15rem, 0.85fr) minmax(14rem, 0.55fr) minmax(22rem, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-block: 2rem; border-top: 1px solid var(--line); }
.prompt-field label { font-size: clamp(1.45rem, 1.95vw, 2.05rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.1; }
.prompt-field p { margin: 0; color: var(--muted); font-size: 0.83rem; }
.prompt-field textarea { margin-top: -0.75rem; }
.upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.upload-field { padding: 1.5rem; border: 1px solid var(--line); }
.upload-field input { width: 100%; margin: 1rem 0; font-size: 0.78rem; }
.upload-field input::file-selector-button { min-height: 2.75rem; margin-right: 0.8rem; padding: 0.55rem 0.8rem; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; }
.upload-field input::file-selector-button:hover { background: var(--ink); color: #fff; }
.extras { margin-top: 1.5rem; }
.check-field { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; max-width: 58rem; align-items: start; padding: 1.2rem 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.check-field:last-child { border-bottom: 1px solid var(--line); }
.check-field input { width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; accent-color: var(--plum); }
.check-field strong { color: var(--plum); font-size: 0.72rem; }
.form-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; padding-top: clamp(3rem, 5vw, 5rem); }
.form-footer > div { max-width: 38rem; }
.form-footer p:last-child { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.78rem; }
button { display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 0.9rem 1.25rem; border: 1px solid var(--plum); border-radius: 0; background: var(--plum); color: #fff; font-weight: 700; cursor: pointer; }
button:hover, button:focus-visible { background: transparent; color: var(--plum); }
footer { min-height: 8rem; }
footer > a:not(.footer-name) { text-underline-offset: 0.35rem; }

@media (max-width: 1000px) {
	.invitation-intro { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.7fr); }
	.jewelry-glimpse header { grid-template-columns: 0.35fr 1fr; }
	.jewelry-glimpse header > div { grid-column: 2; }
	.reassurance { grid-template-columns: 0.35fr 1.2fr; }
	.reassurance aside { grid-column: 2; }
	.photo-guide { grid-template-columns: 0.65fr 1fr; }
	.earrings-example { grid-column: 2; width: 48%; margin-left: auto !important; }
	.form-intro { grid-template-columns: 0.35fr 1fr; }
	.form-intro p:last-child { grid-column: 2; }
	.three-up { grid-template-columns: 1fr 1fr; }
	.prompt-field { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr); }
	.prompt-field p { grid-column: 1; }
	.prompt-field textarea { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 760px) {
	.invitation-intro { grid-template-columns: 1fr 0.7fr; gap: 3rem; }
	.invitation-intro h1 { font-size: clamp(3.5rem, 11vw, 5.2rem); }
	.preparation-grid, .upload-grid { grid-template-columns: 1fr; }
	.preparation article { padding: 1.5rem 0 2.25rem; border-left: 0 !important; border-bottom: 1px solid var(--line); }
	.preparation h3 { margin-top: 1rem; }
	.photo-guide { grid-template-columns: 0.55fr 1fr; }
	.three-up, .two-up { grid-template-columns: 1fr; }
	.prompt-field { display: block; }
	.prompt-field p { margin: 1rem 0 2rem; }
	.prompt-field textarea { margin-top: 0; }
}

@media (max-width: 620px) {
	.site-header { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
	.invitation-intro, .jewelry-glimpse header, .reassurance, .preparation header, .photo-guide, .form-intro { display: block; }
	.invitation-intro { padding-top: 3rem; }
	.invitation-intro figure { width: 78%; margin: 2.25rem 0 0 auto; }
	.invitation-intro .image-frame,
	.portrait-example .image-frame,
	.earrings-example .image-frame { height: auto; overflow: visible; }
	.invitation-intro img,
	.photo-guide img { height: auto; }
	.jewelry-glimpse .section-label { margin-bottom: 1.3rem; }
	.jewelry-glimpse header > div { margin-top: 1.5rem; }
	.glimpse-grid { gap: 0.45rem; margin-top: 2.25rem; }
	.reassurance > div, .reassurance aside { margin-top: 2.5rem; }
	.preparation .section-label, .photo-guide .section-label, .form-intro .section-label { margin-bottom: 1.3rem; }
	.portrait-example { width: 72%; }
	.photo-copy { margin-top: 3rem; }
	.earrings-example { width: 58%; margin-top: 3rem !important; }
	.form-intro p:last-child { margin-top: 1.5rem; }
	.form-footer { align-items: stretch; flex-direction: column; }
	button { width: 100%; }
	footer { align-items: flex-start; flex-direction: column; }
}