:root { --paper:#1A0B2E; --panel:#26103F; --deep:#120626; --ink:#F6EEFF; --muted:#C9B8E8; --accent:#FF4FA3; --cyan:#34E1F0; --yellow:#FFE45E; --purple:#6E4FA0; --heading:'Bungee',sans-serif; --body:'Space Grotesk',system-ui,sans-serif; --pixel:'VT323',monospace; }
* { 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.6 var(--body); }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3,h4 { font-weight:400; overflow-wrap:anywhere; }
h2 { font:clamp(32px,4.4vw,56px)/1.1 var(--heading); }
a { color:var(--cyan); }a:hover { color:var(--yellow); }
button,input,textarea { font:inherit; }button { cursor:pointer; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.eighties-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(--deep); padding:12px; z-index:10; }.skip-link:focus { transform:none; }
.eighties-header { z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 32px; padding-block:28px; }
.eighties-page { background:var(--deep); }
.eighties-brand { font:22px/1.4 var(--heading); color:var(--accent); text-decoration:none; }
.eighties-header nav { display:flex; flex-wrap:wrap; gap:8px 28px; font:24px/1.3 var(--pixel); }
.eighties-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hero { position:relative; min-height:880px; background:linear-gradient(180deg,#120626 0%,#2B0C47 55%,#5A1466 100%); text-align:center; }
.hero-content { z-index:1; max-width:1000px; padding:60px 0 300px; }
.wedding-date { display:block; font:34px/1.4 var(--pixel); letter-spacing:.2em; color:var(--cyan); text-shadow:0 0 10px #34e1f0b3; }
h1 { margin-top:18px; font:clamp(56px,9vw,116px)/1.05 'Monoton',cursive; color:var(--accent); text-shadow:0 0 10px var(--accent),0 0 34px var(--accent); }
h1 span { color:var(--yellow); text-shadow:0 0 10px var(--yellow),0 0 30px #FFB000; }
.hero-eyebrow { max-width:560px; margin:22px auto 0; font-size:21px; color:#E6DBFA; }.hero-location { margin-top:8px; font:22px/1.3 var(--pixel); color:var(--muted); }
.start-button { display:inline-flex; justify-content:center; align-items:center; min-height:54px; max-width:100%; margin-top:26px; padding:12px 30px; border:3px solid var(--cyan); border-radius:6px; background:#12062699; color:var(--cyan); text-decoration:none; font:18px/1.4 var(--heading); box-shadow:0 0 16px #34e1f099,inset 0 0 12px #34e1f04d; }
.synthwave-art { position:absolute; left:0; bottom:0; width:100%; height:420px; pointer-events:none; }
.memphis-triangle { position:absolute; left:7%; top:60px; width:64px; height:64px; transform:rotate(-14deg); }
.memphis-wave { position:absolute; right:8%; top:80px; width:130px; height:44px; }.memphis-circle { position:absolute; right:14%; top:240px; width:46px; height:46px; }.memphis-dots { position:absolute; left:12%; top:270px; width:64px; height:64px; }
.countdown { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 40px; padding:56px 24px; background:var(--panel); }.countdown>p { font:30px/1.3 var(--pixel); letter-spacing:.1em; color:var(--yellow); }.countdown-parts { display:flex; gap:14px; }.countdown-part { min-width:110px; padding:6px 14px 10px; border:2px solid var(--cyan); border-radius:8px; background:#0D0420; text-align:center; }.countdown-part strong { display:block; font:66px/1 var(--pixel); color:var(--cyan); text-shadow:0 0 10px #34e1f0cc; }.countdown-part span { display:block; font:20px/1.2 var(--pixel); color:var(--muted); text-transform:uppercase; }
.zigzag { display:block; width:100%; height:20px; }.countdown+.zigzag { margin-top:32px; }
.couple-section { max-width:1100px; padding:88px 0 104px; text-align:center; }.pixel-copy { font:28px/1.4 var(--pixel); color:var(--yellow); }.couple-section h2 { margin-top:4px; color:var(--accent); text-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent); }
.couple-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:40px 72px; margin-top:56px; }.person { flex:0 1 300px; min-width:0; padding:14px 14px 22px; border:3px solid var(--accent); border-radius:10px; background:var(--panel); box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent); }.person--groom { border-color:var(--cyan); box-shadow:0 0 22px #34e1f073; }.player-label { display:flex; justify-content:space-between; font:24px/1.3 var(--pixel); color:var(--accent); }.person--groom .player-label { color:var(--cyan); }
.portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; margin-top:8px; object-fit:cover; object-position:top; border-radius:4px; filter:saturate(1.15) contrast(1.05); }.person figcaption { margin-top:16px; }.person h3 { font:32px/1.2 var(--heading); }.person figcaption p { margin-top:8px; color:var(--muted); overflow-wrap:anywhere; }
.family-section { margin-top:56px; padding:26px 24px; border:2px dashed var(--purple); border-radius:10px; }.family-groups { display:flex; flex-wrap:wrap; justify-content:center; gap:20px 56px; margin-top:12px; }.family-godparents { order:-1; }.family-pair+.family-pair { margin-top:20px; }.family-pair h3 { font:22px/1.3 var(--pixel); color:var(--muted); text-transform:uppercase; }.family-pair p { font:20px/1.4 var(--heading); overflow-wrap:anywhere; }
.story-section { padding:104px 0; background:var(--panel); }.story-heading { display:flex; flex-wrap:wrap; gap:40px 64px; align-items:center; }.vhs-cassette { flex:1 1 440px; min-width:0; padding:18px; border-radius:14px; background:#0D0420; box-shadow:0 20px 40px -24px #000c; }.vhs-label { padding:18px 22px 22px; border-radius:6px; background:#FFF5DA; color:var(--paper); }.vhs-stripes { display:flex; gap:6px; margin-bottom:14px; }.vhs-stripes span { flex:3; height:10px; background:var(--accent); }.vhs-stripes span:nth-child(2) { flex:2; background:var(--yellow); }.vhs-stripes span:nth-child(3) { flex:1; background:var(--cyan); }.vhs-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; }.vhs-heading h2 { font-size:34px; flex:1; }.vhs-heading>span { flex:none; font:26px/1 var(--pixel); }.story-message,.story-signature { margin-top:12px; }.story-message p+p { margin-top:12px; }.story-play { flex:1 1 300px; font:30px/1.3 var(--pixel); color:var(--yellow); }.story-play p+p { 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:20px; }.story-photos .invitation-story-gallery__photo { position:relative; border-radius:6px; aspect-ratio:4/3; }.story-photos .invitation-story-gallery__photo img { filter:saturate(1.25) contrast(1.1); }.story-photos .invitation-story-gallery__photo::before { content:'▶ PLAY · SP'; position:absolute; z-index:1; inset:0; padding:6px 10px; background:repeating-linear-gradient(180deg,#00000029 0 2px,transparent 2px 4px); color:white; font:24px/1.3 var(--pixel); text-shadow:2px 2px black; text-align:left; }.story-photos .invitation-story-gallery__photo:last-child::before { content:'Ⅱ PAUZĂ · SP'; }.story-photos .invitation-story-gallery__photo::after { content:var(--vhs-date,''); position:absolute; z-index:1; right:10px; bottom:4px; color:white; font:22px/1.3 var(--pixel); text-shadow:2px 2px black; }
.events-section { padding:104px 0; }.events-section>h2 { margin-top:4px; color:var(--cyan); text-shadow:0 0 18px #34e1f080; text-align:center; }.events-date { text-align:center; }.mixtape-layout { display:flex; flex-wrap:wrap; gap:40px 56px; align-items:center; margin-top:52px; }.cassette-svg { flex:1 1 380px; min-width:0; max-width:480px; height:auto; }.event-list { flex:1 1 480px; min-width:0; }.side-label { font:26px/1.4 var(--pixel); color:var(--accent); }.mixtape-side+.mixtape-side { margin-top:20px; }.event-card { display:flex; gap:16px; align-items:center; padding:16px 0; min-width:0; }.event-card+.event-card { border-top:1px solid #3E2766; }.event-photo { flex:0 0 84px; width:84px; height:84px; object-fit:cover; border-radius:6px; }.event-details { min-width:0; flex:1; }.event-heading { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }.event-track { font:30px/1.2 var(--pixel); color:var(--cyan); }.mixtape-side:last-child .side-label~.event-card .event-track { color:var(--yellow); }.event-heading h4 { font:20px/1.3 var(--heading); }.event-card p { margin-top:2px; color:var(--muted); font-size:16px; overflow-wrap:anywhere; }.event-card .event-date { font:20px/1.3 var(--pixel); }.event-card .invitation-navigation { justify-content:flex-start; gap:20px; margin-top:4px; }.event-card .invitation-navigation a { min-height:44px; padding:4px 0; border:0; font-size:15px; text-decoration:underline; }
.rsvp-section { padding:96px 24px; }.rsvp-card { max-width:680px; margin:auto; border:3px solid var(--accent); border-radius:12px; background:var(--deep); box-shadow:0 0 26px color-mix(in srgb,var(--accent) 35%,transparent); }.window-title { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:3px solid var(--accent); border-radius:8px 8px 0 0; background:var(--panel); font:22px/1.3 var(--pixel); }.window-title span { width:12px; height:12px; border-radius:50%; background:var(--accent); }.window-title span:nth-child(2) { background:var(--yellow); }.window-title span:nth-child(3) { margin-right:8px; background:var(--cyan); }.window-content { padding:clamp(24px,5vw,40px); }.rsvp-card h2 { font-size:40px; color:var(--yellow); }.rsvp-intro,.rsvp-deadline,.guest-greeting { margin-top:10px; color:var(--muted); }
.attendance-field { display:flex; gap:12px; border:0; padding:0; margin:24px 0 0; }.attendance-field label { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:6px; border:2px solid var(--purple); border-radius:6px; font:26px/1.2 var(--pixel); text-transform:uppercase; cursor:pointer; }.attendance-field label:has(input:checked) { background:var(--cyan); border-color:var(--cyan); color:var(--deep); }.attendance-field input { margin:0; accent-color:var(--deep); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }.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:22px/1.3 var(--pixel); text-transform:uppercase; color:var(--cyan); }.form-field>label::before { content:'› '; }.song-field>label { color:var(--yellow); }.form-field input,.form-field textarea { min-width:0; width:100%; border:0; border-bottom:2px solid var(--purple); border-radius:0; background:transparent; padding:8px 0; font:17px/1.5 var(--body); color:var(--ink); }.form-field input::placeholder,.form-field textarea::placeholder { color:#9C8BBF; }.form-field textarea { resize:vertical; }
.submit-button { margin-top:26px; width:100%; min-height:56px; padding:12px; border:0; border-radius:6px; background:var(--yellow); color:var(--deep); font:20px/1.3 var(--heading); box-shadow:0 0 18px #ffe45e80; }.submit-button:hover { filter:brightness(1.1); }.form-status { margin-top:16px; padding:12px; border:1px solid var(--cyan); }.form-status--error { border-color:var(--accent); }.form-feedback { margin-top:12px; color:var(--yellow); }.form-feedback:empty { display:none; }
.invitation-footer { padding:0 0 80px; text-align:center; }.footer-message { font:clamp(26px,3.2vw,40px)/1.15 var(--heading); color:var(--accent); text-shadow:0 0 16px var(--accent); overflow-wrap:anywhere; }.footer-names { margin-top:10px; font:26px/1.4 var(--pixel); color:var(--muted); overflow-wrap:anywhere; }.wedday-credit { display:inline-block; min-height:44px; margin-top:16px; font-size:13px; }
#rsvp .invitation-rsvp-information { --rsvp-info-accent:var(--cyan); color:var(--muted); }#rsvp .invitation-contact-phone a { color:var(--cyan); }
@media(max-width:900px) { .memphis-wave { right:3%; width:95px; }.memphis-triangle { left:3%; width:46px; }.memphis-circle { right:5%; }.memphis-dots { left:4%; }.story-photos .invitation-story-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.mixtape-layout { justify-content:center; }.cassette-svg { flex-basis:100%; width:100%; }.event-list { flex-basis:100%; } }
@media(max-width:650px) { .eighties-header { padding-block:20px; gap:12px; }.eighties-header nav { width:100%; gap:6px 18px; font-size:22px; }.hero { min-height:680px; }.hero-content { padding:38px 0 250px; }.wedding-date { font-size:27px; letter-spacing:.1em; }h1 { font-size:clamp(42px,10.5vw,68px); line-height:1.15; }.hero-eyebrow { max-width:360px; font-size:18px; }.hero-location { font-size:21px; }.start-button { font-size:15px; padding:12px 18px; }.synthwave-art { height:300px; }.memphis-triangle { top:18px; left:3%; width:26px; height:26px; }.memphis-wave { top:20px; right:3%; width:50px; height:24px; }.memphis-circle { right:4%; top:180px; width:22px; height:22px; }.memphis-dots { left:3%; top:190px; width:28px; height:28px; }.countdown { gap:20px; padding:36px 16px; }.countdown>p { font-size:27px; }.countdown-parts { gap:10px; }.countdown-part { min-width:75px; padding:6px 10px 10px; }.countdown-part strong { font-size:50px; }.couple-section { padding:56px 0 64px; }.couple-section h2 { font-size:clamp(28px,7.5vw,42px); }.couple-portraits { margin-top:36px; gap:30px; }.person { max-width:300px; }.family-section { padding:24px 16px; margin-top:40px; }.family-groups { gap:24px; }.family-groups>div { flex-basis:100%; }.family-pair p { font-size:18px; }.story-section { padding:64px 0; }.story-heading { gap:28px; }.vhs-cassette { padding:12px; }.vhs-label { padding:16px; }.vhs-heading h2 { font-size:25px; }.vhs-heading>span { font-size:22px; }.story-message { font-size:16px; }.story-play { font-size:27px; }.story-photos { margin-top:32px; }.story-photos .invitation-story-gallery__grid { gap:12px; }.story-photos .invitation-story-gallery__photo::before { font-size:19px; padding:4px 6px; }.story-photos .invitation-story-gallery__photo::after { font-size:17px; right:6px; }.events-section { padding:64px 0; }.events-section>h2 { font-size:clamp(28px,7vw,40px); }.events-date { font-size:24px; }.mixtape-layout { margin-top:36px; gap:30px; }.event-photo { flex-basis:64px; width:64px; height:76px; }.event-card { align-items:flex-start; gap:12px; }.event-heading h4 { font-size:17px; }.event-track { font-size:26px; }.rsvp-section { padding:64px 20px; }.window-title { font-size:20px; }.window-content { padding:26px 20px; }.rsvp-card h2 { font-size:30px; }.rsvp-intro,.rsvp-deadline { font-size:16px; }.form-grid { grid-template-columns:1fr; }.attendance-field { gap:8px; }.attendance-field label { font-size:24px; }.form-field>label { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }