:root { --paper:#FBF3E6; --ink:#2A1B3D; --accent:#6A3FB5; --rose:#C2366A; --orange:#F2A03D; --yellow:#F6CF5B; --red:#E8572A; --blue:#3E8EC4; --heading:'Fraunces',Georgia,serif; --body:'Josefin Sans',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 19px/1.6 var(--body); }
h1,h2,h3,p,figure { margin:0; }h1,h2,h3 { overflow-wrap:anywhere; }h1,h2 { font-family:var(--heading); font-weight:900; font-style:italic; line-height:1; }h2 { font-size:60px; }
a { color:var(--ink); }a:hover { color:var(--accent); }button,input,textarea { font:inherit; }button { cursor:pointer; }:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.disco-page { position:relative; overflow:hidden; }.container { width:calc(100% - 48px); max-width:1160px; margin-inline:auto; }.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; }
.disco-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 32px; padding-block:28px; }.disco-brand { font:italic 900 28px/1.6 var(--heading); text-decoration:none; }.disco-header nav { display:flex; flex-wrap:wrap; gap:8px 28px; font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }.disco-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hero { position:relative; padding:32px 24px 0; text-align:center; }.hero-eyebrow { color:var(--accent); font-size:16px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; }h1 { margin-top:18px; color:var(--accent); font-size:clamp(68px,10.5vw,136px); line-height:.95; letter-spacing:-.02em; text-shadow:4px 4px 0 var(--yellow),8px 8px 0 var(--orange),12px 12px 0 var(--red),16px 16px 0 var(--rose); }.hero-details { display:flex; flex-wrap:wrap; justify-content:center; gap:0 .5em; margin-top:40px; font-size:22px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }.hero-location { overflow-wrap:anywhere; }.wedding-date+.hero-location::before { content:'·'; margin-right:.5em; }.start-button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; max-width:100%; margin-top:26px; padding:10px 34px; border-radius:999px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:17px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.start-button:hover { color:var(--yellow); }.hero-rainbow { position:relative; max-width:1000px; margin:48px auto 0; }.hero-rainbow svg { display:block; width:100%; height:auto; }.hero-sparkle { position:absolute; pointer-events:none; }.hero-sparkle--orange { left:8%; top:40px; width:60px; height:60px; fill:var(--orange); }.hero-sparkle--rose { right:10%; top:110px; width:44px; height:44px; fill:var(--rose); }.hero-sparkle--blue { right:20%; top:20px; width:26px; height:26px; fill:var(--blue); }
.countdown { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 40px; background:var(--ink); color:var(--paper); padding:52px 24px; }.countdown>p { font:italic 600 28px/1.6 var(--heading); }.countdown-parts { display:flex; gap:14px; }.countdown-part { min-width:130px; padding:12px 10px; border-radius:16px; background:var(--orange); color:var(--ink); text-align:center; }.countdown-part:nth-child(2) { background:var(--yellow); }.countdown-part:nth-child(3) { background:var(--red); }.countdown-part strong { display:block; font:900 52px/1 var(--heading); }.countdown-part span { display:block; font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.couple-section { max-width:1060px; margin:auto; padding:112px 0 104px; text-align:center; }.couple-section h2 { font-size:64px; text-shadow:3px 3px 0 var(--yellow),6px 6px 0 var(--orange); }.couple-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:72px 96px; margin-top:76px; }.person { flex:0 1 260px; min-width:0; }.portrait { width:240px; max-width:100%; margin:auto; border-radius:999px 999px 12px 12px; box-shadow:0 0 0 6px var(--rose),0 0 0 12px var(--red),0 0 0 18px var(--orange),0 0 0 24px var(--yellow); }.person--groom .portrait { box-shadow:0 0 0 6px #6A3FB5,0 0 0 12px var(--blue),0 0 0 18px var(--yellow),0 0 0 24px var(--orange); }.portrait img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:top; border-radius:inherit; }.person figcaption { margin-top:44px; }.person h3 { font:italic 900 38px/1.6 var(--heading); }.person figcaption p { overflow-wrap:anywhere; }
.family-section { display:flex; flex-wrap:wrap; justify-content:center; gap:28px 0; margin-top:64px; }.family-section>div { flex:1 1 260px; min-width:0; padding:0 20px; }.family-section>div+div { border-left:3px solid var(--orange); }.family-pair+.family-pair { margin-top:20px; }.family-pair h3 { color:var(--accent); font-size:14px; font-weight:700; line-height:1.6; letter-spacing:.22em; text-transform:uppercase; }.family-pair p { margin-top:4px; font-size:22px; font-weight:400; overflow-wrap:anywhere; }.family-godparents .family-pair p { font:italic 600 26px/1.6 var(--heading); }
.story-section { padding:104px 0; background:#F6E3C8; }.story-section>.container { display:flex; flex-wrap:wrap; align-items:center; gap:40px 72px; }.story-heading { flex:1 1 440px; min-width:0; }.story-heading h2 { color:var(--accent); }.story-message { margin-top:22px; font-size:21px; }.story-message p+p { margin-top:16px; }.story-signature,.story-video { margin-top:16px; }.story-photos { flex:1 1 520px; min-width:0; }.story-photos .invitation-story-gallery { max-width:none; margin:0; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.story-photos .invitation-story-gallery__photo { aspect-ratio:1; border:6px solid var(--orange); border-radius:28px; box-shadow:none; }.story-photos .invitation-story-gallery__photo:nth-child(2) { border-color:var(--rose); margin-top:40px; }.story-photos .invitation-story-gallery__photo:nth-child(3) { border-color:var(--blue); }.story-photos .invitation-story-gallery__photo:nth-child(4) { border-color:#6A3FB5; margin-top:40px; }.story-photos .invitation-story-gallery__photo img { aspect-ratio:1; }
.events-section { padding:104px 0; background:var(--ink); color:var(--paper); }.events-section h2 { color:var(--yellow); text-align:center; }.events-date { margin-top:12px; text-align:center; font-size:16px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:28px; margin-top:56px; }.event-card { min-width:0; overflow:hidden; border-radius:24px; background:var(--paper); color:var(--ink); }.event-stripe { display:flex; height:10px; }.event-stripe span { flex:1; background:var(--rose); }.event-stripe span:nth-child(2) { background:var(--red); }.event-stripe span:nth-child(3) { background:var(--orange); }.event-card--church .event-stripe span:first-child { background:var(--orange); }.event-card--church .event-stripe span:nth-child(2) { background:var(--yellow); }.event-card--church .event-stripe span:nth-child(3),.event-card--party .event-stripe span:first-child { background:var(--blue); }.event-card--party .event-stripe span:nth-child(2) { background:#6A3FB5; }.event-card--party .event-stripe span:nth-child(3) { background:var(--rose); }.event-photo { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }.event-details { padding:22px 24px 26px; }.event-time { display:block; color:var(--accent); font:900 44px/1 var(--heading); }.event-card--party .event-time { color:var(--rose); }.event-card h3 { margin-top:8px; font-size:18px; line-height:1.6; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.event-card p { margin-top:6px; font-size:17px; overflow-wrap:anywhere; }.event-card .event-date { font-size:14px; 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 { padding:104px 24px 88px; }.rsvp-frame { max-width:700px; margin:auto; padding:8px; border-radius:36px; background:linear-gradient(90deg,#6A3FB5,#3E8EC4,#F6CF5B,#F2A03D,#E8572A,#C2366A); }.rsvp-card { padding:clamp(28px,5vw,48px); border-radius:30px; background:var(--paper); }.rsvp-card h2 { font-size:52px; text-align:center; }.rsvp-intro { max-width:460px; margin:12px auto 0; text-align:center; }.rsvp-deadline,.guest-greeting { margin-top:12px; text-align:center; }
.attendance-field { display:flex; gap:4px; margin:26px 0 0; padding:4px; border:0; border-radius:999px; background:#F6E3C8; }.attendance-field label { display:flex; flex:1; min-width:0; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px; border-radius:999px; font-weight:600; line-height:1.4; cursor:pointer; }.attendance-field label:has(input:checked) { background:var(--ink); color:var(--paper); }.attendance-field input { margin:0; accent-color:var(--ink); }.attendance-field label:has(input:checked) input { accent-color:var(--paper); }
.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:4px; }.form-field[hidden] { display:none; }.form-field--full { grid-column:1/-1; }.form-field>label { font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.song-request>label { color:var(--accent); }.form-field input,.form-field textarea { width:100%; min-width:0; border:0; border-bottom:2px solid var(--ink); border-radius:0; padding:10px 0; background:transparent; color:var(--ink); font-size:18px; font-weight:300; }.form-field textarea { resize:vertical; }.submit-button { margin-top:28px; width:100%; min-height:56px; padding:12px; border:0; border-radius:999px; background:var(--accent); color:white; font-family:var(--body); font-size:18px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.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 { padding:0 0 80px; text-align:center; }.footer-disco { width:70px; height:82px; }.footer-message { margin-top:10px; color:var(--accent); font:italic 900 48px/1.1 var(--heading); text-shadow:3px 3px 0 var(--yellow),6px 6px 0 var(--orange); overflow-wrap:anywhere; }.footer-names { margin-top:10px; font-size:16px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; overflow-wrap:anywhere; }.wedday-credit { display:inline-block; min-height:44px; margin-top:20px; font-size:13px; }
@media(max-width:1050px) { .story-section>.container { gap:40px; }.story-heading { flex-basis:320px; }.story-photos { flex-basis:430px; }.family-section>div { flex-basis:240px; }.hero-sparkle--orange { left:3%; }.hero-sparkle--rose { right:3%; } }
@media(max-width:750px) { .disco-header { padding-block:20px; gap:8px 20px; }.disco-header nav { width:100%; gap:4px 20px; font-size:12px; }.hero { padding-top:32px; }.hero-eyebrow { max-width:85%; margin:auto; font-size:13px; }.hero h1 { font-size:clamp(56px,11vw,82px); text-shadow:2px 2px 0 var(--yellow),4px 4px 0 var(--orange),6px 6px 0 var(--red),8px 8px 0 var(--rose); }.hero-details { margin-top:30px; font-size:16px; letter-spacing:.16em; }.start-button { font-size:14px; padding:12px 24px; }.hero-sparkle--orange { top:12px; left:3%; width:30px; height:30px; }.hero-sparkle--rose { top:130px; width:25px; height:25px; }.hero-sparkle--blue { top:10px; right:8%; width:20px; height:20px; }.hero-rainbow { margin-top:36px; }.countdown { padding:32px 24px; }.countdown>p { font-size:23px; text-align:center; }.countdown-parts { gap:12px; }.countdown-part { min-width:88px; padding:12px 8px; border-radius:12px; }.countdown-part strong { font-size:38px; }.countdown-part span { font-size:11px; }.couple-section { padding:72px 0; }.couple-section h2 { font-size:48px; }.couple-portraits { margin-top:62px; gap:64px; }.person { flex-basis:240px; }.portrait { width:210px; }.person h3 { font-size:32px; }.family-section { margin-top:44px; }.family-section>div { flex-basis:100%; }.family-section>div+div { border-left:0; }.family-pair h3 { font-size:12px; }.family-pair p { font-size:20px; }.story-section { padding:64px 0; }.story-heading h2 { font-size:46px; }.story-message { font-size:19px; }.story-photos .invitation-story-gallery__grid { gap:14px; }.story-photos .invitation-story-gallery__photo { border-width:4px; border-radius:20px; }.story-photos .invitation-story-gallery__photo:nth-child(even) { margin-top:24px; }.events-section { padding:64px 0; }.events-section h2 { font-size:46px; }.events-date { font-size:13px; letter-spacing:.16em; }.event-grid { margin-top:36px; }.rsvp-section { padding:64px 24px; }.rsvp-card { padding:30px 22px; }.rsvp-card h2 { font-size:40px; }.rsvp-frame { padding:6px; border-radius:30px; }.rsvp-card { border-radius:24px; }.attendance-field label { font-size:15px; padding:8px 4px; }.form-grid { grid-template-columns:1fr; gap:18px; }.form-field>label { font-size:12px; }.submit-button { font-size:15px; letter-spacing:.1em; }.invitation-footer { padding-bottom:56px; }.footer-message { font-size:40px; }.footer-names { font-size:13px; letter-spacing:.16em; } }
@media(max-width:360px) { .container { width:calc(100% - 36px); }.hero { padding-inline:18px; }.hero h1 { font-size:52px; }.hero-eyebrow { font-size:11px; }.countdown { padding-inline:18px; }.countdown-parts { gap:8px; }.countdown-part { min-width:80px; }.rsvp-section { padding-inline:18px; }.rsvp-card { padding-inline:18px; }.attendance-field { border-radius:22px; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }