@import url('fonts.css');
:root { --navy: #172735; --cream: #f7f4ee; --pink: #d7a0ae; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--navy); color: var(--cream); font-family: Arial, Helvetica, sans-serif; }
.page { min-height: 100svh; display: flex; flex-direction: column; }
.topline { height: 7px; background: var(--pink); }
header { position: relative; z-index: 1; padding: clamp(26px, 4vw, 52px) 6%; }
.wordmark { display: inline-flex; flex-direction: column; font: 500 clamp(31px, 4vw, 50px)/.95 'Cormorant Garamond', Georgia, serif; letter-spacing: .11em; }
.wordmark span { font: 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .23em; margin-top: 14px; }
main { position: relative; display: grid; place-items: center; flex: 1; overflow: hidden; min-height: 550px; isolation: isolate; }
.photo, .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo { object-fit: cover; object-position: center 42%; z-index: -2; }
.shade { z-index: -1; background: linear-gradient(90deg, rgba(14, 24, 32, .83), rgba(14, 24, 32, .44) 65%, rgba(14, 24, 32, .28)), linear-gradient(0deg, rgba(14, 24, 32, .4), transparent 48%); }
.message { width: min(88%, 900px); padding: 80px 0 100px; text-align: center; }
.eyebrow { margin: 0 0 25px; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; }
h1 { margin: 0; font: 400 clamp(76px, 11vw, 155px)/.95 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; }
h1 em { font-weight: 400; color: #f1c5d0; }
.rule { width: 60px; height: 1px; background: var(--pink); margin: 38px auto 26px; }
.message p:last-child { font: 400 clamp(23px, 2.5vw, 32px)/1.25 'Cormorant Garamond', Georgia, serif; margin: 0; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 20px 6%; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
@media (max-width: 650px) { header { padding: 28px 7%; } .wordmark { font-size: 34px; } main { min-height: 640px; } .photo { object-position: 62% center; } .shade { background: linear-gradient(0deg, rgba(14,24,32,.88), rgba(14,24,32,.25) 80%), linear-gradient(90deg, rgba(14,24,32,.34), transparent); } .message { width: 86%; padding: 130px 0 55px; } h1 { font-size: clamp(72px, 17vw, 105px); } .eyebrow { line-height: 1.7; } footer { padding: 19px 7%; } footer span:last-child { display: none; } }