:root { --paper:#F3EFE6; --ink:#1C2B45; --muted:#56627A; --accent:#C44932; --heading:'DM Serif Display',Georgia,serif; --body:'DM Sans',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--body); }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--heading); font-weight:400; line-height:1.1; overflow-wrap:anywhere; }
h2 { font-size:clamp(36px,4.5vw,56px); }
h3 { font-size:32px; }
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; }
.container { width:calc(100% - 48px); max-width:1160px; margin-inline:auto; }
.eyebrow { font:12px/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.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; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:28px; }
.flight-brand { font:500 15px var(--mono); letter-spacing:.12em; text-decoration:none; }
.site-header nav { display:flex; flex-wrap:wrap; gap:12px 28px; font-size:14px; }
.site-header nav a { text-decoration:none; }
.hero { padding:32px 0 96px; text-align:center; max-width:1100px; }
h1 { margin-top:14px; font-size:clamp(58px,9.5vw,124px); line-height:.98; letter-spacing:-.02em; }
h1 em { color:var(--accent); }
.hero-subtitle { margin-top:20px; font:italic 26px/1.4 var(--heading); }
.boarding-ticket { display:grid; grid-template-columns:minmax(0,1fr) 300px; margin-top:56px; background:white; border-radius:22px; box-shadow:0 30px 60px -36px #1c2b4573; text-align:left; }
.ticket-main { padding:32px 40px; min-width:0; }
.ticket-heading { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #E4E0D6; padding-bottom:18px; font:12px/1.6 var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.ticket-heading span:last-child { color:var(--accent); }
.ticket-route { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:26px; }
.ticket-route strong { display:block; font:72px/1 var(--heading); }
.ticket-route span { display:block; color:var(--muted); font-size:14px; }
.ticket-route>div:last-child { text-align:right; }
.ticket-route>div:last-child strong { color:var(--accent); }
.flight-line { display:flex; flex:1; align-items:center; gap:8px; color:var(--accent); font-size:32px; }
.flight-line::before,.flight-line::after { content:''; flex:1; border-top:2px dotted #A9C4DC; }
.ticket-details { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:30px; padding-top:24px; border-top:1px solid #E4E0D6; }
.ticket-details span,.stub-details span { display:block; font:11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ticket-details b,.stub-details b { display:block; font-size:14px; overflow-wrap:anywhere; }
.ticket-stub { position:relative; display:flex; flex-direction:column; padding:32px 28px; border-left:2px dashed #D9D4C8; font-size:15px; }
.ticket-stub::before,.ticket-stub::after { content:''; position:absolute; left:-15px; width:28px; height:28px; border-radius:50%; background:var(--paper); }
.ticket-stub::before { top:-14px; }.ticket-stub::after { bottom:-14px; }
.ticket-stub .eyebrow { color:var(--muted); font-size:10px; }
.stub-details { display:flex; gap:24px; margin-top:18px; }
.barcode { height:64px; margin-top:20px; background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px); }
.hero-button,.submit-button { display:block; border:0; border-radius:999px; padding:13px 20px; background:var(--accent); color:white; text-decoration:none; font-weight:700; text-align:center; }
.hero-button { margin-top:auto; font-size:14px; }.hero-button:hover { color:white; filter:brightness(.9); }
.countdown { display:flex; align-items:center; justify-content:center; gap:26px; padding:48px 24px; background:#18233B; color:white; }
.countdown>.eyebrow { color:white; margin-right:20px; }
.countdown-part { text-align:center; }.countdown-part strong { display:block; padding:0 10px; background:#111C30; color:#E9B53F; font:48px/1.3 var(--mono); border-radius:4px; }
.countdown-part span { display:block; margin-top:8px; font:11px var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.couple-section { padding:96px 0; text-align:center; }.couple-section h2,.events-section h2 { margin-top:10px; }
.couple-portraits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin-top:52px; text-align:left; }
.person { display:flex; gap:24px; padding:24px; background:repeating-linear-gradient(135deg,#fff 0 12px,#f7f9fb 12px 13px); border:1px solid #e4e8ee; border-radius:14px; min-width:0; }
.portrait { flex:0 0 120px; }.portrait img { display:block; width:120px; height:180px; object-fit:cover; object-position:top; border-radius:6px; }
.person .eyebrow { font-size:10px; color:var(--muted); }.person h3 { margin-top:4px; }.person-role { display:block; margin:10px 0; font-size:13px; text-transform:uppercase; color:var(--muted); }.person figcaption p { font-size:15px; color:var(--muted); }
.family-section { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:48px; padding:32px; border-radius:14px; background:white; text-align:left; }
.family-godparents { grid-column:1; grid-row:1; }.family-bride-parents { grid-column:2; }.family-groom-parents { grid-column:3; }
.family-pair+.family-pair { margin-top:20px; }.family-pair h3 { font-size:11px; color:var(--muted); }.family-pair p { font:24px/1.4 var(--heading); overflow-wrap:anywhere; }
.story-section { max-width:none; width:100%; padding:100px max(24px,calc((100% - 1160px)/2)); background:white; }
.story-heading { display:grid; grid-template-columns:1fr 1fr; gap:12px 60px; }.story-heading>.eyebrow { grid-column:1; }.story-heading h2 { grid-column:1; }.story-message { grid-column:2; grid-row:1 / span 2; color:var(--muted); }.story-message p+p { margin-top:12px; }.story-signature,.story-video { grid-column:2; }
.story-photos { margin-top:48px; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }.story-photos .invitation-story-gallery__photo { border-radius:12px; aspect-ratio:3/4; }
.events-section { padding:96px 0 0; text-align:center; }.events-date { margin-top:16px; color:var(--muted); }
.flight-board { overflow:auto; margin-top:48px; padding:22px 30px; border-radius:14px; background:#18233B; color:white; text-align:left; }
table { border-collapse:collapse; width:100%; font:13px/1.6 var(--mono); }th,td { padding:18px 12px; border-bottom:1px solid #ffffff26; }thead th { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#a8b6ce; }tbody th { font-size:14px; text-transform:uppercase; font-weight:400; }tbody td:first-child { color:#E9B53F; font-size:20px; }tbody tr:last-child>* { border-bottom:0; }
.event-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; text-align:left; }
.event-card { position:relative; min-width:0; padding:20px; background:white; border-radius:12px; }
.event-photo { float:left; width:86px; height:100px; object-fit:cover; border-radius:8px; margin:0 16px 12px 0; }.event-card h3 { font:700 17px/1.4 var(--body); }.event-time,.event-date { font:12px/1.6 var(--mono); color:var(--muted); }.event-location,.event-address { font-size:14px; overflow-wrap:anywhere; }.event-description { clear:both; padding-top:10px; font-size:14px; color:var(--muted); }.event-navigation { font-size:13px; }
.rsvp-section { padding:120px 24px 72px; }.rsvp-card { max-width:780px; margin:auto; padding:48px; border-radius:22px; background:white; box-shadow:0 30px 60px -36px #1c2b4573; }.rsvp-card h2 { margin-top:12px; font-size:clamp(34px,4vw,48px); }.rsvp-intro,.rsvp-deadline,.guest-greeting { margin-top:16px; color:var(--muted); font-size:16px; }
.attendance-field { display:flex; gap:8px; border:0; border-radius:999px; padding:4px; background:#edf2f8; margin:28px 0 0; }.attendance-field label { flex:1; min-width:0; display:flex; justify-content:center; align-items:center; gap:8px; padding:10px; border-radius:999px; font-size:15px; cursor:pointer; }.attendance-field label:has(input:checked) { background:var(--ink); color:white; }.attendance-field input { margin:0; accent-color:var(--accent); }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; margin-top:28px; }.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 { margin-bottom:6px; font:11px/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.form-field input,.form-field textarea { min-width:0; width:100%; padding:12px 14px; border:1px solid #dce2eb; border-radius:9px; color:var(--ink); background:white; font-size:16px; }.form-field textarea { resize:vertical; }.submit-button { width:100%; margin-top:26px; font-size:16px; }.form-status { margin-top:16px; padding:12px; border:1px solid var(--accent); }.form-status--error { color:#a63b30; }.form-feedback { margin-top:12px; font-size:14px; }.form-feedback:empty { display:none; }
.invitation-footer { text-align:center; padding:20px 24px 96px; }.footer-plane { font-size:32px; color:var(--accent); }.invitation-footer h2 { margin:12px 0; font-size:40px; }.footer-names,.footer-date { font:12px/1.8 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }.footer-note { margin-top:20px; }.wedday-credit { display:inline-block; margin-top:24px; font-size:12px; }
@media(max-width:900px) { .boarding-ticket { grid-template-columns:minmax(0,1fr) 240px; }.ticket-main { padding:28px; }.ticket-details { grid-template-columns:repeat(2,minmax(0,1fr)); }.person { gap:16px; padding:18px; }.portrait { flex-basis:90px; }.portrait img { width:90px; height:150px; }.event-grid { gap:14px; }.story-heading { gap:16px 30px; }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .site-header { flex-direction:column; align-items:flex-start; gap:18px; padding-block:20px; }.site-header nav { gap:10px 18px; font-size:12px; }.hero { padding:36px 0 64px; }h1 { font-size:clamp(48px,12vw,78px); }.hero-subtitle { font-size:22px; }.boarding-ticket { grid-template-columns:1fr; margin-top:36px; }.ticket-main { padding:24px; }.ticket-heading { font-size:10px; }.ticket-route strong { font-size:56px; }.ticket-route span { font-size:12px; }.ticket-stub { border-left:0; border-top:2px dashed #D9D4C8; padding:24px; }.ticket-stub::before { left:-14px; top:-15px; }.ticket-stub::after { left:auto; right:-14px; bottom:auto; top:-15px; }.barcode { height:40px; margin:16px 0 24px; }.countdown { gap:14px; padding:32px 16px; flex-wrap:wrap; }.countdown>.eyebrow { width:100%; text-align:center; margin:0 0 10px; }.countdown-part strong { font-size:36px; }.couple-section,.story-section { padding-block:64px; }.couple-portraits { grid-template-columns:1fr; gap:20px; margin-top:32px; }.portrait { flex-basis:110px; }.portrait img { width:110px; height:160px; }.family-section { grid-template-columns:1fr; gap:24px; padding:24px; }.family-section>div { grid-column:auto; grid-row:auto; }.story-heading { display:block; }.story-heading h2 { margin-top:12px; }.story-message,.story-signature,.story-video { margin-top:20px; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.events-section { padding-top:64px; }.flight-board { padding:10px; margin-top:32px; }table { min-width:580px; }.event-grid { grid-template-columns:1fr; }.event-card { padding:20px; }.rsvp-section { padding:64px 24px; }.rsvp-card { padding:28px 22px; }.form-grid { grid-template-columns:1fr; }.attendance-field label { font-size:13px; padding:10px 5px; }.invitation-footer h2 { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.plane-icon { display:inline-block; width:24px; height:24px; fill:currentColor; vertical-align:middle; }
.flight-brand .plane-icon { width:20px; height:20px; color:var(--accent); transform:rotate(45deg); }
.flight-line .plane-icon { flex:none; width:34px; height:34px; transform:rotate(90deg); }
.footer-plane .plane-icon { width:32px; height:32px; transform:rotate(45deg); }
section[id] { scroll-margin-top:100px; }
.person { position:relative; padding-bottom:60px; }
.passport-stamp { position:absolute; right:18px; bottom:14px; width:76px; height:76px; display:flex; flex-direction:column; justify-content:center; border:1px dashed var(--accent); border-radius:50%; color:var(--accent); font:10px/1.5 var(--mono); text-align:center; text-transform:uppercase; transform:rotate(-14deg); opacity:.75; }
.person--groom .passport-stamp { color:#537FA6; border-color:#537FA6; transform:rotate(14deg); }
@media(max-width:650px) { section[id] { scroll-margin-top:190px; } }