@font-face { font-family:"Cormorant Garamond"; src:url("/fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("/fonts/cormorant-garamond-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root { --ivory:#f5f0e7; --paper:#fbf8f2; --forest:#173f35; --forest-deep:#0e2f28; --magenta:#8b3157; --magenta-deep:#6d1f40; --gold:#b49a63; --ink:#1d302b; --muted:#6e746f; --line:rgba(23,63,53,.2); }
* { box-sizing:border-box; }
html { background:var(--forest-deep); color:var(--ink); font-family:Inter,system-ui,sans-serif; }
body { margin:0; min-width:320px; }
img { max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.save-date { min-height:100svh; display:grid; background:var(--paper); }
.portrait { position:relative; min-height:0; aspect-ratio:3/4; overflow:hidden; background:var(--forest-deep); color:white; }
.portrait picture,.portrait img { display:block; width:100%; height:100%; }
.portrait img { position:absolute; inset:0; object-fit:cover; object-position:50% 38%; filter:saturate(.84) contrast(1.04) brightness(1.035); }
.portrait__veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,19,21,0) 48%,rgba(18,19,21,.58) 100%); }
.portrait__caption { position:absolute; right:22px; bottom:18px; left:22px; margin:0; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.88); font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.portrait__caption span { color:#d3b98b; }

.editorial { position:relative; min-height:66svh; padding:24px 25px 22px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:var(--paper); }
.editorial::before { content:""; position:absolute; width:260px; height:260px; top:-150px; right:-140px; border:1px solid rgba(139,49,87,.13); border-radius:50%; }
.editorial__frame { position:absolute; inset:10px; border:1px solid rgba(180,154,99,.45); pointer-events:none; }
.brand-lockup { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.brand-mark { grid-column:2; width:84px; }
.brand-mark img { display:block; width:100%; height:auto; }
.eyebrow { grid-column:3; justify-self:end; margin:0; color:var(--forest); font-size:9px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; }

.editorial__content { position:relative; z-index:1; max-width:34rem; margin:20px auto 18px; text-align:center; }
.invitation-line { margin:0 0 12px; color:var(--muted); font-family:"Cormorant Garamond",Georgia,serif; font-size:17px; font-style:italic; }
h1 { margin:0; display:grid; justify-items:center; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(42px,14vw,64px); font-weight:500; line-height:.74; letter-spacing:.04em; text-transform:uppercase; }
h1 em { z-index:1; margin:-.06em 0 -.02em; color:var(--magenta); font-size:.62em; font-weight:400; line-height:1; text-transform:none; }

.date { width:min(100%,300px); margin:22px auto 0; padding:11px 0 10px; display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; border-block:1px solid var(--line); font-family:"Cormorant Garamond",Georgia,serif; text-transform:uppercase; }
.date__day { color:var(--magenta-deep); font-size:38px; line-height:1; text-align:right; }
.date__month { padding:0 16px; color:var(--forest); font-size:16px; letter-spacing:.08em; }
.date__year { color:var(--magenta-deep); font-size:22px; letter-spacing:.08em; text-align:left; }
.event-meta { margin-top:13px; display:flex; justify-content:center; align-items:center; gap:11px; color:var(--forest); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.event-meta time,.event-meta p { margin:0; }
.event-meta span { width:3px; height:3px; border-radius:50%; background:var(--gold); }
.message { max-width:25rem; margin:17px auto 0; color:var(--muted); font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; font-style:italic; line-height:1.4; }
.countdown { width:max-content; margin:13px auto 0; padding:6px 10px; border:1px solid rgba(139,49,87,.22); border-radius:999px; color:var(--magenta-deep); font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.actions { margin-top:17px; display:grid; justify-items:center; gap:12px; }
.button { min-height:48px; padding:13px 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--forest); color:#fff; background:var(--forest); box-shadow:0 10px 24px rgba(23,63,53,.16); font-size:10px; font-weight:600; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; transition:background-color 160ms ease,transform 160ms ease; }
.button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.button:hover { background:var(--forest-deep); transform:translateY(-1px); }
.calendar-link { color:var(--magenta-deep); font-size:10px; line-height:1.6; text-underline-offset:4px; }
.button:focus-visible,.calendar-link:focus-visible { outline:2px solid var(--magenta); outline-offset:4px; }
.signature { position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.signature span { width:35px; height:1px; background:var(--gold); }
.signature p { margin:0; color:var(--muted); font-family:"Cormorant Garamond",Georgia,serif; font-size:13px; font-style:italic; }

@media (min-width:700px) and (max-width:899px) {
  .save-date { padding:20px; background:var(--ivory); }
  .portrait { min-height:40svh; aspect-ratio:auto; }
  .portrait img { object-position:50% 42%; }
  .editorial { min-height:70svh; padding:36px 46px 30px; }
  .editorial__content { margin-block:24px; }
  h1 { font-size:64px; }
}

@media (min-width:900px) and (max-width:1099px) {
  .save-date { padding:26px; grid-template-columns:minmax(0,44%) minmax(0,56%); background:var(--ivory); }
  .portrait,.editorial { min-height:calc(100svh - 52px); aspect-ratio:auto; }
  .portrait img { position:absolute; }
  .portrait__caption { writing-mode:vertical-rl; right:16px; bottom:24px; left:auto; gap:14px; }
  .editorial { padding:42px 38px 30px; }
  .editorial__frame { inset:10px; }
}

@media (min-width:1100px) {
  body { background:var(--ivory); }
  .save-date { min-height:100svh; grid-template-columns:minmax(420px,46%) minmax(560px,54%); background:var(--paper); }
  .portrait { min-height:100svh; aspect-ratio:auto; }
  .portrait img { position:absolute; object-position:50% 40%; transform:scale(1.002); }
  .portrait__veil { background:linear-gradient(180deg,rgba(18,19,21,0) 55%,rgba(18,19,21,.62) 100%); }
  .portrait__caption { right:42px; bottom:31px; left:42px; font-size:10px; }
  .editorial { min-height:100svh; padding:46px clamp(58px,7vw,120px) 38px; }
  .editorial__frame { inset:18px; }
  .brand-mark { width:108px; }
  .eyebrow { font-size:10px; }
  .editorial__content { margin:22px auto; }
  .invitation-line { margin-bottom:17px; font-size:19px; }
  h1 { font-size:clamp(58px,5.2vw,78px); line-height:.76; }
  .date { width:330px; margin-top:34px; padding:15px 0 14px; }
  .date__day { font-size:44px; }
  .date__month { font-size:17px; }
  .date__year { font-size:24px; }
  .event-meta { margin-top:16px; font-size:10px; }
  .message { margin-top:26px; font-size:20px; }
  .actions { margin-top:24px; }
  .button { min-width:230px; }
  .signature p { font-size:15px; }
}

@media (max-height:740px) and (min-width:700px) {
  .editorial { padding-block:28px 24px; }
  .brand-mark { width:78px; }
  .editorial__content { margin-block:12px; }
  .invitation-line { margin-bottom:10px; }
  h1 { font-size:52px; }
  .date { margin-top:20px; padding-block:9px; }
  .message { margin-top:16px; }
  .actions { margin-top:16px; }
}

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