:root { --paper:#FFF8F0; --ink:#1E1B2E; --accent:#C21E64; --pink:#FFC6DC; --mint:#B8F0DC; --yellow:#FFD25E; --lavender:#D9C8FF; --blue:#B5E3FF; --heading:'Shrikhand',cursive; --label:'Bungee',sans-serif; --body:'Outfit',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--invitation-preview-height,0px) + 24px); }
body { margin:0; background:var(--paper); color:var(--ink); font:300 18px/1.6 var(--body); }
h1,h2,h3,p,figure { margin:0; }h1,h2,h3 { font-weight:400; overflow-wrap:anywhere; }h1,h2 { font-family:var(--heading); line-height:1; }h2 { font-size:clamp(38px,4.7vw,60px); }
a { color:inherit; }a:hover { color:var(--accent); }button,input,textarea { font:inherit; }button { cursor:pointer; }:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.pastel-page { position:relative; overflow:hidden; }.container { position:relative; width:calc(100% - 48px); max-width:1160px; margin-inline:auto; }.svg-definitions { position:absolute; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.skip-link { position:absolute; top:0; left:0; transform:translateY(-150%); background:white; padding:12px; z-index:10; }.skip-link:focus { transform:none; }
.pastel-header { z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 32px; padding-block:28px; }.pastel-brand { font:26px/1.3 var(--heading); text-decoration:none; }.pastel-header nav { display:flex; flex-wrap:wrap; gap:8px 24px; font:14px/1.4 var(--label); }.pastel-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hero { position:relative; padding:56px 24px 120px; }.memphis-background { position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; }.hero-frame { width:100%; max-width:900px; }.hero-card { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); background:white; border:4px solid var(--ink); box-shadow:14px 14px 0 var(--pink); }.hero-photo { display:block; width:100%; height:100%; min-height:380px; object-fit:cover; border-right:4px solid var(--ink); filter:saturate(1.1); }.hero-copy { min-width:0; padding:40px clamp(24px,3.4vw,44px); text-align:center; }.hero-eyebrow { display:inline-block; padding:6px 14px; background:var(--blue); border:3px solid var(--ink); font:16px/1.4 var(--label); transform:rotate(-3deg); }h1 { margin-top:22px; font-size:clamp(56px,7.5vw,92px); color:var(--accent); text-shadow:3px 3px 0 var(--yellow),6px 6px 0 var(--ink); }.wedding-date { display:block; margin-top:28px; font:26px/1.4 var(--label); }.hero-location { margin-top:2px; overflow-wrap:anywhere; }.start-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; max-width:100%; margin-top:24px; padding:10px 28px; background:var(--yellow); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); text-decoration:none; font:16px/1.4 var(--label); }
.hero-glasses,.hero-scrunchie,.hero-earrings,.hero-sneaker { position:absolute; z-index:2; pointer-events:none; }.hero-glasses { left:-60px; top:-40px; width:170px; height:64px; transform:rotate(-12deg); }.hero-scrunchie { right:-44px; top:-46px; width:110px; height:110px; }.hero-earrings { left:-54px; bottom:-40px; width:120px; height:82px; transform:rotate(8deg); }.hero-sneaker { right:-56px; bottom:-44px; width:160px; height:102px; transform:rotate(-8deg); }
.countdown { max-width:900px; padding:0 0 104px; text-align:center; }.countdown>p { font:30px/1.3 var(--heading); }.countdown-parts { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:22px; }.countdown-part { width:140px; padding:16px 0; background:var(--pink); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); transform:rotate(-3deg); }.countdown-part:nth-child(2) { background:var(--mint); transform:rotate(2deg); }.countdown-part:nth-child(3) { background:var(--lavender); transform:rotate(-1.5deg); }.countdown-part strong { display:block; font:52px/1 var(--label); }.countdown-part span { display:block; margin-top:6px; font:14px/1.2 var(--label); }
.couple-section { padding:96px 0; background:var(--mint); border-block:4px solid var(--ink); text-align:center; }.couple-section>.container { max-width:1000px; }.couple-section h2 { text-shadow:4px 4px 0 white; }.couple-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:48px 80px; margin-top:56px; }.person { position:relative; flex:0 1 280px; min-width:0; }.portrait { padding:12px 12px 18px; background:white; border:4px solid var(--ink); box-shadow:10px 10px 0 #FF6FAE; transform:rotate(-2deg); }.person--groom .portrait { transform:rotate(2deg); box-shadow:10px 10px 0 #B49CFF; }.portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; }.portrait-scrunchie { position:absolute; right:-28px; top:-28px; width:72px; height:72px; pointer-events:none; }.portrait-glasses { position:absolute; left:-30px; top:-20px; width:110px; height:42px; transform:rotate(-10deg); pointer-events:none; }.person figcaption { margin-top:26px; }.person h3 { display:inline-block; padding:4px 16px; background:white; border:3px solid var(--ink); font:26px/1.4 var(--label); }.person figcaption p { margin-top:8px; overflow-wrap:anywhere; }
.family-section { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:60px; }.family-section>div { flex:0 1 326px; min-width:0; max-width:100%; }.family-godparents { order:-1; }.family-pair { padding:16px 20px; background:white; border:3px solid var(--ink); }.family-pair+.family-pair { margin-top:20px; }.family-pair h3 { font:13px/1.5 var(--label); color:var(--accent); }.family-pair p { margin-top:4px; font-size:20px; font-weight:600; overflow-wrap:anywhere; }
.story-section { position:relative; background:#FFF1C9; border-block:4px solid var(--ink); padding:96px 0; }.story-section .memphis-background { opacity:.35; }.story-heading { max-width:700px; margin:auto; padding:28px 32px; background:white; border:4px solid var(--ink); box-shadow:10px 10px 0 #7FD8BE; text-align:center; }.story-heading h2 { font-size:52px; line-height:1.05; }.story-message { margin-top:16px; font-size:20px; }.story-message p+p { margin-top:16px; }.story-signature,.story-video { margin-top:16px; }.story-photos { margin-top:56px; }.story-photos .invitation-story-gallery { max-width:none; margin:0; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }.story-photos .invitation-story-gallery__photo { aspect-ratio:1; border:4px solid var(--ink); border-radius:0; box-shadow:8px 8px 0 #FF6FAE; }.story-photos .invitation-story-gallery__photo:nth-child(2) { box-shadow:8px 8px 0 #7FD8BE; }.story-photos .invitation-story-gallery__photo:nth-child(3) { box-shadow:8px 8px 0 #B49CFF; }.story-photos .invitation-story-gallery__photo:nth-child(4) { box-shadow:8px 8px 0 var(--yellow); }
.events-section { padding:104px 0; }.events-section>h2 { text-align:center; color:var(--accent); text-shadow:3px 3px 0 var(--blue); }.events-date { margin-top:12px; font:16px/1.5 var(--label); text-align:center; }.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:36px; margin-top:56px; }.event-card { min-width:0; background:white; border:4px solid var(--ink); box-shadow:10px 10px 0 var(--pink); }.event-card:nth-child(2) { box-shadow:10px 10px 0 var(--mint); }.event-card:nth-child(3) { box-shadow:10px 10px 0 var(--lavender); }.event-photo { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-bottom:4px solid var(--ink); }.event-details { padding:22px 24px 26px; }.event-time { display:block; font:40px/1 var(--heading); }.event-card h3 { margin-top:8px; font:20px/1.4 var(--label); }.event-card p { margin-top:6px; font-size:17px; overflow-wrap:anywhere; }.event-card .event-date { font-size:15px; font-weight:600; }.event-card .invitation-navigation { justify-content:flex-start; gap:20px; margin-top:12px; }.event-card .invitation-navigation a { padding:4px 0; border:0; border-radius:0; font-size:16px; font-weight:600; text-decoration:underline; }
.rsvp-section { position:relative; padding:40px 24px 104px; }.rsvp-frame { position:relative; max-width:700px; margin:auto; }.rsvp-card { position:relative; padding:clamp(28px,5vw,48px); background:white; border:4px solid var(--ink); box-shadow:14px 14px 0 #B49CFF; }.rsvp-card h2 { font-size:50px; }.rsvp-intro,.rsvp-deadline,.guest-greeting { margin-top:12px; }.rsvp-legwarmers { position:absolute; z-index:1; left:-70px; top:40px; width:70px; height:84px; transform:rotate(-10deg); pointer-events:none; }.rsvp-earrings { position:absolute; z-index:1; right:-60px; top:120px; width:90px; height:61px; transform:rotate(12deg); pointer-events:none; }
.attendance-field { display:flex; gap:12px; border:0; padding:0; margin:26px 0 0; }.attendance-field label { display:flex; flex:1; min-width:0; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:8px; border:3px solid var(--ink); font:15px/1.3 var(--label); cursor:pointer; }.attendance-field label:has(input:checked) { background:var(--yellow); }.attendance-field input { margin:0; accent-color:var(--ink); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }.form-field { display:flex; flex-direction:column; min-width:0; gap:6px; }.form-field[hidden] { display:none; }.form-field--full { grid-column:1/-1; }.form-field>label { font:13px/1.5 var(--label); }.form-field input,.form-field textarea { min-width:0; width:100%; border:3px solid var(--ink); border-radius:0; background:var(--paper); padding:10px 12px; font:17px/1.5 var(--body); color:var(--ink); }.form-field textarea { resize:vertical; }.submit-button { margin-top:26px; width:100%; min-height:56px; padding:12px; border:3px solid var(--ink); background:var(--accent); color:white; box-shadow:6px 6px 0 var(--ink); font:18px/1.4 var(--label); }.submit-button:hover { filter:brightness(.9); }.form-status { margin-top:16px; padding:12px; border:2px solid var(--accent); }.form-status--error { color:#9c2525; }.form-feedback { margin-top:16px; font-weight:600; }.form-feedback:empty { display:none; }
.invitation-footer { position:relative; padding:56px 0 80px; text-align:center; border-top:4px solid var(--ink); background:var(--pink); }.footer-message { font:clamp(30px,3.6vw,46px)/1.1 var(--heading); text-shadow:3px 3px 0 white; overflow-wrap:anywhere; }.footer-names { margin-top:10px; font:16px/1.5 var(--label); overflow-wrap:anywhere; }.wedday-credit { display:inline-block; min-height:44px; margin-top:20px; font-size:13px; }
@media(max-width:1050px) { .hero { padding-inline:70px; }.hero-glasses { left:-42px; width:140px; }.hero-scrunchie { right:-38px; width:95px; }.hero-earrings { left:-42px; width:100px; }.hero-sneaker { right:-42px; width:130px; }.hero-copy { padding:36px 24px; }h1 { font-size:clamp(52px,7vw,78px); }.wedding-date { font-size:22px; }.rsvp-legwarmers { left:-40px; width:50px; }.rsvp-earrings { right:-34px; width:70px; } }
@media(max-width:750px) { .pastel-header { padding-block:20px; gap:12px; }.pastel-header nav { width:100%; font-size:12px; gap:6px 18px; }.hero { padding:50px 32px 84px; }.hero-card { grid-template-columns:1fr; }.hero-photo { height:auto; min-height:0; aspect-ratio:5/4; border-right:0; border-bottom:4px solid var(--ink); }.hero-copy { padding:36px 24px 40px; }h1 { font-size:clamp(50px,10vw,72px); }.hero-glasses { left:-20px; top:-30px; width:110px; height:46px; }.hero-scrunchie { right:-23px; top:-28px; width:70px; height:70px; }.hero-earrings { left:-20px; bottom:-36px; width:85px; height:60px; }.hero-sneaker { right:-18px; bottom:-38px; width:115px; height:76px; }.countdown { padding-bottom:64px; }.countdown-parts { gap:16px; }.countdown-part { width:95px; padding:14px 0; }.countdown-part strong { font-size:40px; }.countdown-part span { font-size:11px; }.couple-section { padding:64px 0; }.couple-portraits { margin-top:44px; gap:48px; }.portrait-scrunchie { right:-16px; width:60px; height:60px; }.portrait-glasses { left:-16px; width:95px; }.family-section { margin-top:48px; }.story-section { padding:64px 0; }.story-heading { padding:24px 20px; }.story-heading h2 { font-size:38px; }.story-message { font-size:18px; }.story-photos { margin-top:40px; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }.events-section { padding:64px 0; }.events-date { font-size:13px; }.event-grid { gap:30px; margin-top:36px; }.rsvp-section { padding:24px 24px 72px; }.rsvp-card { padding:30px 22px; }.rsvp-card h2 { font-size:38px; }.rsvp-legwarmers { left:-19px; top:26px; width:37px; height:58px; }.rsvp-earrings { right:-21px; top:110px; width:50px; height:42px; }.attendance-field { gap:8px; }.attendance-field label { padding:8px 4px; font-size:12px; }.form-grid { grid-template-columns:1fr; }.invitation-footer { padding:40px 0 56px; } }
@media(max-width:380px) { .countdown-parts { gap:12px; }.countdown-part { width:76px; }.countdown-part strong { font-size:34px; }.hero-eyebrow { font-size:14px; }.wedding-date { font-size:20px; }.start-button { padding:10px 14px; font-size:14px; }.attendance-field { flex-direction:column; }.submit-button { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }