:root { --paper:#F6F0E6; --card:#FBF7F0; --ink:#1F3B3A; --muted:#5A6563; --gold:#B48A4A; --line:#D9C7A4; --accent:#1F3B3A; --body:'Bodoni Moda',Georgia,serif; --script:'Pinyon Script',cursive; --label:'Tenor Sans',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:18px/1.65 var(--body); }h1,h2,h3,p,figure { margin:0; }h1,h2,h3 { font-weight:400; overflow-wrap:anywhere; }h2 { font:68px/1 var(--script); }a { color:inherit; }a:hover { color:var(--accent); }button,input,textarea { font:inherit; }button { cursor:pointer; }:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }.ball-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:var(--card); padding:12px; z-index:10; }.skip-link:focus { transform:none; }.ornament { width:200px; height:24px; }
.ball-header { padding-block:28px; }.ball-header nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 36px; font:14px/1.4 var(--label); letter-spacing:.22em; text-transform:uppercase; }.ball-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hero { padding:32px 24px 0; }.formal-invitation { max-width:888px; margin:auto; padding:clamp(40px,6vw,64px); background:var(--card); border:1px solid var(--gold); outline:1px solid var(--gold); outline-offset:-12px; text-align:center; box-shadow:0 30px 60px -40px #1f3b3a73; }.parent-families { margin-top:22px; }.parent-families .family-pair p { font:15px/1.6 var(--label); letter-spacing:.18em; text-transform:uppercase; overflow-wrap:anywhere; }.family-conjunction { margin-top:2px; font-size:16px; font-style:italic; color:var(--muted); }.hero-eyebrow { margin-top:18px; font-size:21px; font-style:italic; }h1 { margin-top:18px; font:clamp(76px,10vw,118px)/1.05 var(--script); color:var(--accent); }h1 span { font-size:.6em; color:var(--gold); }.family-godparents { margin-top:18px; font-size:20px; font-style:italic; }.family-godparents .family-pair+.family-pair { margin-top:10px; }.family-pair p { overflow-wrap:anywhere; }.hero-date { margin-top:22px; padding:12px 0; border-block:1px solid var(--line); font:16px/1.65 var(--label); letter-spacing:.24em; text-transform:uppercase; overflow-wrap:anywhere; }.start-button { display:inline-flex; align-items:center; justify-content:center; max-width:100%; min-height:50px; margin-top:26px; padding:12px 30px; background:var(--accent); color:var(--card); text-decoration:none; font:14px/1.5 var(--label); letter-spacing:.24em; text-transform:uppercase; }.start-button:hover { color:var(--card); filter:brightness(1.15); }
.city-illustration { max-width:1240px; margin:56px auto 0; }.city-skyline { display:block; width:100%; height:auto; }.city-illustration figcaption { margin-top:10px; text-align:center; font-style:italic; color:var(--muted); }.countdown { padding:72px 0 96px; text-align:center; }.countdown-oval { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:min(420px,100%); aspect-ratio:7/4; padding:20px; border:3px double var(--gold); border-radius:50%; background:var(--card); }.countdown-oval>p { font:40px/1 var(--script); color:var(--accent); }.countdown-parts { display:flex; flex-wrap:wrap; justify-content:center; gap:0 10px; margin-top:10px; font:17px/1.6 var(--label); letter-spacing:.14em; text-transform:uppercase; }.countdown-part+.countdown-part::before { content:'· '; }.countdown-part strong { font-weight:400; }
.couple-section { padding:96px 0; background:#EFE4D2; text-align:center; }.couple-section .container { max-width:1000px; }.couple-section .ornament { margin-top:10px; }.couple-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:48px 96px; margin-top:48px; }.person { flex:0 1 260px; min-width:0; }.portrait { width:230px; height:290px; max-width:100%; margin:auto; padding:10px; border:3px double var(--gold); border-radius:50%; background:var(--card); }.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:50%; filter:sepia(.45) saturate(.8); }.person figcaption { margin-top:20px; }.person h3 { font:46px/1 var(--script); }.person figcaption p { margin-top:8px; font-style:italic; color:var(--muted); overflow-wrap:anywhere; }
.events-section { padding:104px 0; }.events-section>h2 { text-align:center; }.events-date { margin-top:10px; text-align:center; font:15px/1.6 var(--label); letter-spacing:.22em; text-transform:uppercase; color:#9A5852; }.dance-program { display:flex; flex-wrap:wrap; gap:48px 64px; align-items:flex-start; margin-top:56px; }.program-frame { position:relative; flex:1 1 420px; min-width:0; max-width:520px; margin:auto; }.tassel { position:absolute; z-index:1; right:26px; top:-40px; width:48px; height:120px; }.program-card { padding:34px 32px 30px; background:var(--card); border:1px solid var(--gold); border-radius:10px; transform:rotate(-1.5deg); box-shadow:0 24px 40px -28px #1f3b3a80; }.program-eyebrow { text-align:center; font:14px/1.6 var(--label); letter-spacing:.3em; text-transform:uppercase; color:#9A5852; }.event-card { margin-top:22px; }.dance-heading { display:flex; align-items:baseline; gap:10px; }.dance-name { font:34px/1 var(--script); }.dance-rule { flex:1; border-bottom:1px dotted var(--muted); }.event-time { font:22px/1.4 var(--label); }.event-card h3 { margin-top:4px; font:500 17px/1.5 var(--body); }.event-card p { font-size:17px; overflow-wrap:anywhere; }.event-card .event-date { font:13px/1.6 var(--label); color:var(--muted); }.event-card .invitation-navigation { justify-content:flex-start; gap:18px; margin-top:4px; }.event-card .invitation-navigation a { padding:4px 0; border:0; border-radius:0; font-size:16px; font-style:italic; text-decoration:underline; }.event-photos { flex:1 1 380px; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.event-photo { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; filter:sepia(.5) saturate(.75); border:6px solid var(--card); outline:1px solid var(--line); }.event-photo:last-child:nth-child(odd) { grid-column:1/-1; aspect-ratio:16/7; }
.story-section { background:#EFE4D2; padding:96px 0; }.story-heading { max-width:680px; margin:auto; text-align:center; }.story-message { margin-top:20px; font-size:21px; font-style:italic; }.story-message p+p { margin-top:16px; }.story-signature,.story-video { margin-top:16px; }.story-photos { margin-top:52px; }.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:auto; padding:14px 14px 12px; background:#E3D3B6; border:1px solid var(--gold); border-radius:6px; box-shadow:0 16px 26px -20px #1f3b3a8c; }.story-photos .invitation-story-gallery__photo img { height:auto; aspect-ratio:3/4; border-radius:4px; filter:sepia(.6) saturate(.7) contrast(1.05); }.story-photos .invitation-story-gallery__photo::after { content:'Atelier foto'; display:block; margin-top:10px; text-align:center; font:11px/1.5 var(--label); letter-spacing:.24em; text-transform:uppercase; color:#5A4A30; }
.rsvp-section { max-width:1100px; display:flex; flex-wrap:wrap; gap:40px 64px; align-items:center; padding:104px 0 88px; }.rsvp-introduction { flex:1 1 300px; min-width:0; text-align:center; }.gramophone { width:220px; max-width:100%; height:auto; }.rsvp-introduction h2 { margin-top:20px; font:34px/1.3 var(--label); letter-spacing:.24em; }.rsvp-intro,.rsvp-deadline { margin-top:8px; font-size:20px; font-style:italic; }.rsvp-card { flex:1 1 460px; min-width:0; padding:clamp(28px,5vw,44px); background:var(--card); border:1px solid var(--gold); outline:1px solid var(--gold); outline-offset:-10px; }.guest-greeting { margin-bottom:20px; font-style:italic; }.attendance-field { display:flex; flex-direction:column; gap:4px; border:0; padding:0; margin:0; }.attendance-field label { display:flex; align-items:center; gap:12px; min-height:44px; font-size:19px; cursor:pointer; }.attendance-field input { width:18px; height:18px; flex:none; margin:0; accent-color:var(--accent); }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; margin-top:16px; }.form-field { display:flex; flex-direction:column; min-width:0; }.form-field[hidden] { display:none; }.form-field--full { grid-column:1/-1; }.form-field>label { font:13px/1.5 var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }.form-field input,.form-field textarea { min-width:0; width:100%; border:0; border-bottom:1px solid var(--gold); border-radius:0; background:transparent; padding:8px 0; font:18px/1.5 var(--body); color:var(--ink); }.form-field textarea { resize:vertical; }.submit-button { margin-top:26px; width:100%; min-height:52px; padding:12px 16px; border:0; background:var(--accent); color:var(--card); font:14px/1.6 var(--label); letter-spacing:.26em; text-transform:uppercase; }.submit-button:hover { filter:brightness(1.15); }.form-status { margin-block:12px; padding:12px; border:1px solid var(--gold); }.form-status--error { color:#9c322b; }.form-feedback { margin-top:14px; }.form-feedback:empty { display:none; }
.invitation-footer { padding:0 0 80px; text-align:center; }.footer-names { margin-top:10px; font:56px/1.1 var(--script); color:var(--accent); overflow-wrap:anywhere; }.footer-date { margin-top:4px; font:14px/1.6 var(--label); letter-spacing:.3em; }.footer-message { margin-top:16px; font-style:italic; }.wedday-credit { display:inline-block; min-height:44px; margin-top:16px; font-size:13px; }
@media(max-width:650px) { body { font-size:17px; }.ball-header { padding-block:16px; }.ball-header nav { gap:6px 18px; font-size:11px; letter-spacing:.14em; }.hero { padding:20px 24px 0; }.formal-invitation { padding:38px 24px; }.parent-families .family-pair p { font-size:12px; letter-spacing:.12em; }.hero-eyebrow { font-size:18px; }h1 { font-size:clamp(68px,17vw,96px); }.family-godparents { font-size:18px; }.hero-date { font-size:12px; letter-spacing:.14em; }.start-button { padding:12px 16px; font-size:11px; letter-spacing:.15em; }.city-illustration { margin-top:36px; }.city-illustration figcaption { font-size:15px; }.countdown { padding-block:48px 64px; }.countdown-parts { gap:4px; font-size:12px; letter-spacing:.05em; }.countdown-oval { padding:16px; }.countdown-oval>p { font-size:34px; }.couple-section,.story-section { padding-block:64px; }h2 { font-size:56px; }.couple-portraits { margin-top:36px; gap:36px; }.events-section { padding-block:64px; }.events-date { font-size:12px; letter-spacing:.12em; }.dance-program { margin-top:40px; gap:36px; }.program-card { padding:28px 22px; }.dance-name { font-size:30px; }.event-time { font-size:19px; }.program-eyebrow { font-size:12px; }.event-photos { gap:12px; }.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:16px; }.story-photos .invitation-story-gallery__photo { padding:8px 8px 10px; }.story-photos .invitation-story-gallery__photo::after { font-size:9px; letter-spacing:.12em; }.rsvp-section { padding-block:64px; gap:32px; }.rsvp-card { padding:28px 24px; }.rsvp-introduction h2 { font-size:28px; }.rsvp-intro,.rsvp-deadline { font-size:18px; }.form-grid { grid-template-columns:1fr; }.attendance-field label { font-size:17px; }.footer-names { font-size:46px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }