:root{--ink:#08334b;--sea:#087d8e;--paper:#fffaf1;--gold:#f6b545;--accent:#087d8e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #f6b545;outline-offset:5px}.shell{max-width:1180px;margin:auto;padding:0 32px}header{display:flex;justify-content:space-between;align-items:center;padding:26px 0}.brand{font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:bold}.edition{font-size:14px}.hero{position:relative;border-radius:20px;overflow:hidden;background:#a7d5e4;box-shadow:0 20px 60px #08334b15}.hero img{display:block;width:100%;height:auto}.hero a{display:block}.intro{padding:70px 0 35px;display:grid;grid-template-columns:1.35fr 1fr;gap:55px;align-items:center}.eyebrow{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent)}h1,h2,p{margin-top:0}h1{font-family:Georgia,serif;font-size:clamp(42px,6.5vw,76px);line-height:1.06;font-weight:400;letter-spacing:-.04em;margin-bottom:24px}h2{font-family:Georgia,serif;font-size:32px;line-height:1.2;font-weight:400}.intro p{max-width:600px}.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:100px;background:var(--accent);color:white;padding:15px 27px;text-decoration:none;font-size:16px;font-weight:bold;cursor:pointer;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #08334b20}.secondary{background:transparent;border:1px solid #08334b30;color:var(--ink)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.countdown{border-top:1px solid #08334b30;border-bottom:1px solid #08334b30;padding:28px 0}.countdown-label{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:15px}.numbers{display:flex;gap:25px}.number{display:block;font-family:Georgia,serif;font-size:40px;line-height:1.1}.unit{font-size:13px}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:25px 0 65px}.detail{border-top:2px solid var(--accent);padding:25px 0}.detail h2{font-size:27px}.detail p{margin-bottom:10px}.tag{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}.strip{background:var(--ink);color:white;position:relative;overflow:hidden;padding:65px 32px;text-align:center;border-radius:20px}.strip h2{font-size:clamp(32px,5vw,48px)}.strip p{max-width:620px;margin:0 auto 25px}.strip .button{background:var(--gold);color:var(--ink)}.wave{height:56px;width:200%;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 38px,#ffffff18 40px 42px,transparent 44px 80px);animation:drift 18s linear infinite;position:absolute;bottom:0;left:-50%;pointer-events:none}@keyframes drift{to{transform:translateX(12%)}}footer{padding:35px 0;display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#456373}.personal{--accent:#c45845}.personal.phoenix{--accent:#076a9d}.personal .intro{padding-top:38px}.personal .hero{margin-top:20px}.personal .hero img{width:100%;height:auto;max-height:none;object-fit:contain}.invite-note{display:inline-block;border:1px solid #08334b25;border-radius:100px;padding:6px 14px;font-size:14px;margin-bottom:22px}.personal .strip{margin-top:10px}.toast{min-height:24px;font-size:14px;margin-top:10px}@media(max-width:700px){.shell{padding:0 20px}header{padding:20px 0}.edition{font-size:12px}.brand{font-size:12px}.intro{grid-template-columns:1fr;gap:22px;padding:38px 0 20px}.details{grid-template-columns:1fr;gap:0;margin-bottom:30px}.detail{padding:22px 0}.detail h2{margin-bottom:12px}.numbers{justify-content:space-between;gap:12px}.strip{padding:40px 22px}.hero{border-radius:12px}.personal .hero img{max-height:none}.actions .button{flex-grow:1}footer{flex-direction:column;gap:3px}h1{font-size:48px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Preserve every edge of invitation artwork at every screen size. */
.hero{border-radius:0;overflow:visible}

/* Layered scroll preview: the invitation stays behind the moving page. */
main{position:relative;isolation:isolate}
main>.hero{position:sticky;top:18px;z-index:0}
.scroll-panel{position:relative;z-index:1;background:var(--paper);margin-top:32px;padding:0 32px;border-radius:28px 28px 0 0;box-shadow:0 -18px 45px #08334b18;min-height:100vh}
.scroll-panel::before{content:"";display:block;width:48px;height:4px;background:#08334b35;border-radius:4px;position:absolute;top:16px;left:calc(50% - 24px)}
@media(max-width:700px){main>.hero{top:12px}.scroll-panel{margin-top:24px;padding:0 18px;border-radius:20px 20px 0 0}.scroll-panel .intro{padding-top:42px}}
@media(prefers-reduced-motion:reduce){main>.hero{position:relative;top:auto}.scroll-panel{box-shadow:none}}