:root { --paper:#EFE5D2; --card:#F8F1E3; --ink:#3B2F25; --muted:#6A5A4A; --line:#D8C9AE; --accent:#2D6A6A; --rust:#A5532F; --heading:'Abril Fatface',Georgia,serif; --body:'Lora',Georgia,serif; --hand:'Caveat',cursive; }
* { 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:18px/1.65 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.5vw,56px); }
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:4px; }
.journal-page { position:relative; overflow:hidden; }
.topography { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.container { position:relative; width:calc(100% - 48px); max-width:1160px; margin-inline:auto; }
.handwritten { font:30px/1.4 var(--hand); color:var(--rust); }
.eyebrow { font:13px/1.6 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.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; }
.journal-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 32px; padding-block:28px; }
.journal-brand { font:24px/1.4 var(--heading); text-decoration:none; }
.journal-header nav { display:flex; flex-wrap:wrap; gap:8px 28px; font-size:16px; }
.journal-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hero { max-width:1100px; padding:32px 0 96px; }
.compass { position:absolute; right:0; top:0; width:120px; height:120px; opacity:.85; }
.hero-eyebrow { padding-right:130px; font-size:32px; }
h1 { position:relative; margin-top:4px; font-size:clamp(64px,10vw,128px); line-height:.95; letter-spacing:.01em; }
h1 span { color:var(--accent); }
.hero-subtitle { margin-top:16px; font-size:24px; font-style:italic; overflow-wrap:anywhere; }
.postcard { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.05fr) minmax(0,.8fr); margin-top:52px; background:var(--card); transform:rotate(-1.2deg); box-shadow:0 2px 3px #3b2f251f,0 36px 60px -36px #3b2f2580; }
.postcard-photo { display:block; width:100%; height:100%; min-height:360px; object-fit:cover; filter:sepia(.2) saturate(.9); }
.postcard-message { min-width:0; padding:32px clamp(20px,3vw,40px); border-right:1px solid var(--line); }
.postcard-heading { font:22px/1.3 var(--heading); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.postcard-letter { margin-top:18px; font:28px/1.3 var(--hand); }
.postcard-signature { margin-top:18px; font:30px/1.3 var(--hand); color:var(--accent); }
.postcard-address { position:relative; min-width:0; padding:28px 28px 32px; }
.postage-stamp { width:96px; margin-left:auto; padding:6px; background:white; border:5px dotted var(--card); outline:1px solid var(--line); }
.postage-stamp img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; filter:sepia(.25); }
.postmark { position:absolute; right:70px; top:70px; width:88px; height:88px; border:1.5px solid var(--ink); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-12deg); opacity:.55; font-size:11px; line-height:1.2; letter-spacing:.06em; text-align:center; }
.postmark strong { font-size:14px; font-weight:400; }
.address-lines { margin-top:36px; font:24px/1.5 var(--hand); overflow-wrap:anywhere; }
.address-lines p { border-bottom:1px solid var(--line); }
.countdown { max-width:900px; padding-bottom:88px; text-align:center; }
.countdown-parts { display:flex; justify-content:center; gap:40px; margin-top:6px; }
.countdown-part strong { display:block; font:60px/1 var(--heading); }
.countdown-part span { display:block; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.couple-section { max-width:1060px; padding:48px 0 104px; text-align:center; }
.couple-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:56px 96px; margin-top:60px; }
.person { position:relative; flex:0 1 280px; min-width:0; }
.portrait { padding:12px 12px 14px; background:white; transform:rotate(-2deg); box-shadow:0 18px 30px -20px #3b2f2580; }
.person--groom .portrait { transform:rotate(2deg); }
.portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; filter:sepia(.12); }
.luggage-tag { position:relative; margin:-18px 0 0 auto; width:210px; padding:14px 18px 14px 34px; background:#F2DFC2; clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%); text-align:left; transform:rotate(4deg); }
.luggage-tag::before { content:''; position:absolute; left:20px; top:50%; width:9px; height:9px; margin-top:-5px; border-radius:50%; background:var(--paper); }
.luggage-tag h3 { font:26px/1.3 var(--heading); }.luggage-tag p { font-size:15px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.person--groom .luggage-tag { transform:rotate(-3deg); background:#CFE0DC; }
.family-section { margin-top:72px; }
.family-groups { display:flex; flex-wrap:wrap; justify-content:center; gap:24px 56px; margin-top:12px; }
.family-godparents { order:-1; }
.family-pair+.family-pair { margin-top:20px; }.family-pair p { margin-top:4px; font-size:21px; overflow-wrap:anywhere; }.family-godparents .family-pair p { font:24px/1.5 var(--heading); }
.story-section { position:relative; padding:104px 0; background:rgba(248,241,227,.7); }
.story-heading { max-width:680px; }.story-message { margin-top:22px; font-size:20px; }.story-message p+p { margin-top:16px; }.story-signature,.story-video { margin-top:20px; }
.story-photos { position:relative; margin-top:56px; }
.story-photos::before { content:''; position:absolute; inset:28% 0 0; border-top:2px dotted var(--rust); border-radius:50%; transform:rotate(-8deg); opacity:.45; pointer-events:none; }
.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:32px 28px; align-items:start; counter-reset:photo; }
.story-photos .invitation-story-gallery__photo { position:relative; aspect-ratio:auto; padding:10px 10px 30px; border-radius:0; background:white; transform:rotate(-3deg); box-shadow:0 16px 28px -20px #3b2f2580; overflow:visible; counter-increment:photo; }
.story-photos .invitation-story-gallery__photo img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; filter:sepia(.15); }
.story-photos .invitation-story-gallery__photo::after { content:'nr. ' counter(photo); display:block; margin-top:6px; color:var(--ink); font:24px/1.4 var(--hand); text-align:center; }
.story-photos .invitation-story-gallery__photo:nth-child(2) { margin-top:48px; transform:rotate(2deg); }
.story-photos .invitation-story-gallery__photo:nth-child(3) { transform:rotate(-1.5deg); }
.story-photos .invitation-story-gallery__photo:nth-child(4) { margin-top:36px; transform:rotate(3deg); }
.events-section { padding:104px 0; text-align:center; }.events-date { margin-top:8px; font-size:28px; }
.route-map { display:block; width:100%; max-width:900px; height:auto; margin:36px auto 0; }.route-map text { font:26px var(--hand); fill:var(--ink); }
.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:28px; margin-top:44px; text-align:left; }
.event-card { position:relative; min-width:0; padding:22px 24px 26px 48px; background:var(--card); clip-path:polygon(10% 0,100% 0,100% 100%,10% 100%,0 50%); }
.event-card::before { content:''; position:absolute; left:22px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--paper); border:1px solid var(--line); }
.event-card:last-child { background:#F2DFC2; }.event-time { display:block; font:40px/1 var(--heading); color:var(--accent); }.event-card:last-child .event-time { color:var(--rust); }
.event-card h3 { margin-top:8px; font:500 22px/1.4 var(--body); }.event-card p { margin-top:4px; font-size:16px; color:var(--muted); overflow-wrap:anywhere; }.event-card .event-description { margin-top:10px; }
.event-photo { display:block; width:100%; height:160px; object-fit:cover; margin-bottom:18px; }
.event-card .invitation-navigation { justify-content:flex-start; gap:12px; margin-top:10px; }.event-card .invitation-navigation a { padding:4px 0; border:0; border-radius:0; font-size:16px; font-style:italic; text-decoration:underline; }
.rsvp-section { position:relative; padding:24px 24px 96px; }.rsvp-card { position:relative; max-width:760px; margin:auto; padding:clamp(28px,5vw,48px); background:var(--card); transform:rotate(.6deg); box-shadow:0 2px 3px #3b2f251f,0 36px 60px -36px #3b2f2580; }
.reply-stamp { position:absolute; right:28px; top:28px; width:76px; height:92px; border:1.5px dashed var(--rust); display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.12em; color:var(--rust); text-transform:uppercase; }
.rsvp-card>.eyebrow,.rsvp-card h2,.rsvp-card>.rsvp-intro { padding-right:85px; }.rsvp-card h2 { margin-top:8px; font-size:clamp(34px,4vw,46px); line-height:1.05; }.rsvp-intro,.rsvp-deadline,.guest-greeting { margin-top:12px; font-size:17px; color:var(--muted); }
.attendance-field { display:flex; flex-wrap:wrap; gap:6px 32px; border:0; padding:0; margin:26px 0 0; }.attendance-field label { display:flex; align-items:center; gap:10px; min-height:44px; font:28px/1.3 var(--hand); cursor:pointer; }.attendance-field input { width:20px; height:20px; margin:0; accent-color:var(--accent); }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px; margin-top:16px; }.form-field { display:flex; flex-direction:column; min-width:0; }.form-field[hidden] { display:none; }.form-field--full,.form-field[data-guests-field] { grid-column:1/-1; }
.form-field>label { font:13px/1.6 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }.form-field input { min-width:0; width:100%; padding:8px 0; border:0; border-bottom:1px solid #BFAE90; border-radius:0; background:transparent; color:var(--ink); font:26px/1.5 var(--hand); }
.form-field textarea { min-width:0; width:100%; border:0; border-radius:0; padding:0; background:repeating-linear-gradient(transparent 0 35px,var(--line) 35px 36px); font:24px/36px var(--hand); color:var(--ink); resize:vertical; }
.submit-button { margin-top:28px; width:100%; min-height:54px; padding:12px 20px; border:0; border-radius:4px; background:var(--accent); color:var(--card); font:500 17px/1.5 var(--body); letter-spacing:.06em; }.submit-button:hover { filter:brightness(.9); }
.form-status { margin-top:16px; padding:12px; border:1px solid var(--accent); }.form-status--error { color:#9c3322; }.form-feedback { margin-top:12px; font-size:14px; }.form-feedback:empty { display:none; }
.invitation-footer { padding:0 0 72px; text-align:center; }.invitation-footer .handwritten { font-size:32px; }.footer-names { margin-top:4px; font:40px/1.1 var(--heading); overflow-wrap:anywhere; }.footer-date { margin-top:4px; font-size:14px; letter-spacing:.22em; color:var(--muted); }.wedday-credit { display:inline-block; min-height:44px; margin-top:20px; font-size:12px; }
@media(max-width:1000px) { .postcard { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.postcard-address { grid-column:1/-1; display:flex; align-items:center; gap:36px; border-top:1px solid var(--line); }.postcard-message { border-right:0; }.postage-stamp { order:1; flex:none; margin-left:auto; }.address-lines { margin:0; flex:1; }.postmark { right:70px; top:50px; }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { body { font-size:17px; }.journal-header { padding-block:18px; gap:4px; }.journal-header nav { width:100%; gap:6px 18px; font-size:13px; }.hero { padding:26px 0 64px; }h1 { font-size:clamp(48px,12vw,78px); line-height:1.05; }.compass { width:65px; height:65px; right:0; top:12px; }.hero-eyebrow { padding-right:65px; font-size:26px; }.hero-subtitle { font-size:20px; }.postcard { grid-template-columns:1fr; margin-top:36px; transform:rotate(-.7deg); }.postcard-photo { min-height:0; height:auto; aspect-ratio:5/4; }.postcard-message { padding:28px 24px; }.postcard-address { padding:24px; gap:20px; }.address-lines { font-size:22px; }.postage-stamp { width:80px; }.postmark { right:48px; top:36px; width:70px; height:70px; }.countdown { padding-bottom:56px; }.countdown-parts { gap:30px; }.countdown-part strong { font-size:48px; }.countdown-part span { font-size:11px; }.couple-section { padding:32px 0 64px; }.couple-portraits { gap:50px; margin-top:40px; }.family-section { margin-top:56px; }.family-groups { gap:24px; }.family-groups>div { flex-basis:100%; }.story-section { padding:64px 0; }.story-message { font-size:18px; }.story-photos { margin-top:36px; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }.story-photos .invitation-story-gallery__photo { padding:7px 7px 14px; }.story-photos .invitation-story-gallery__photo:nth-child(2) { margin-top:24px; }.story-photos .invitation-story-gallery__photo:nth-child(4) { margin-top:20px; }.story-photos .invitation-story-gallery__photo::after { font-size:22px; }.events-section { padding:64px 0; }.route-map { margin-top:24px; }.event-grid { margin-top:24px; gap:20px; }.rsvp-section { padding:12px 24px 64px; }.rsvp-card { padding:28px 22px; }.reply-stamp { width:48px; height:62px; top:22px; right:20px; font-size:9px; }.rsvp-card>.eyebrow,.rsvp-card h2 { padding-right:55px; }.rsvp-card>.rsvp-intro { padding-right:0; }.rsvp-card>.eyebrow { font-size:10px; }.form-grid { grid-template-columns:1fr; }.attendance-field { gap:8px; }.attendance-field label { font-size:25px; }.footer-names { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }