@font-face{font-family:OceanSerif;src:url('/assets/cormorant.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:OceanSerif;src:url('/assets/cormorant-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:dark;font-family:OceanSerif,Georgia,serif;color:#f2e6d7;background:#031324;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{background:#031324}.opening{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;justify-content:center;padding: max(240px,34svh) 20px max(58px,9svh)}
.scenery{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.ocean-image,.water,.shade,.starlight{position:absolute;inset:0}.ocean-image,.water{background-image:url('/assets/moonlit-ocean.webp');background-size:cover;background-position:50% 50%}.water{mask-image:linear-gradient(transparent 57%,#000 72%);-webkit-mask-image:linear-gradient(transparent 57%,#000 72%);animation:tide 12s ease-in-out infinite alternate;transform-origin:50% 65%;opacity:.65}.shade{background:linear-gradient(180deg,transparent 20%,rgba(2,15,29,.08) 32%,rgba(2,15,29,.58) 47%,transparent 73%,rgba(0,7,18,.3));box-shadow:inset 0 0 100px #010c1d30}.starlight{background:radial-gradient(circle at 18% 12%,#e0efff 0 .65px,transparent 1.5px),radial-gradient(circle at 79% 9%,#e0efff 0 .7px,transparent 1.5px),radial-gradient(circle at 72% 27%,#e0efff 0 .6px,transparent 1.4px),radial-gradient(circle at 26% 23%,#e0efff 0 .7px,transparent 1.5px);animation:stars 7s ease-in-out infinite alternate}
.invitation{width:100%;text-align:center;max-width:900px;animation:arrive 1.6s ease-out both}.date{font-size:.8rem;letter-spacing:.4em;padding-left:.4em;margin:0;color:#e3eaf0;text-shadow:0 2px 18px #00142d}.ornament{display:flex;align-items:center;justify-content:center;gap:10px;color:#e8d4b9;margin:20px auto 24px;font-size:15px}.ornament span{height:1px;width:31px;background:linear-gradient(90deg,transparent,#e8d4b9aa)}.ornament span:last-child{transform:rotate(180deg)}h1{font-weight:400;font-size:clamp(2.75rem,12.4vw,5.75rem);line-height:1.02;letter-spacing:-.035em;margin:0;text-shadow:0 2px 35px #00122670}h1 span{display:inline-block;margin-top:.12em}.wave{width:42px;height:9px;stroke:#b6d9ea;stroke-width:1;margin:19px auto 16px;display:block}.message{font-style:italic;font-size:clamp(1.1rem,4.8vw,1.7rem);line-height:1.4;margin:0;text-wrap:balance;color:#f0e4d8;text-shadow:0 2px 15px #001020}.dive{font:italic 1.35rem OceanSerif,Georgia,serif;letter-spacing:.075em;color:#c6e5f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:94px;height:94px;margin:clamp(29px,6svh,64px) auto 0;border:1px solid #b3def1;border-radius:50%;background:#06223855;box-shadow:0 0 22px #a5dfff0b,inset 0 0 20px #a5dfff05;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:background .4s,box-shadow .4s,transform .4s}.dive svg{width:18px;height:25px;stroke:currentColor;stroke-width:1.15}.dive:focus-visible{outline:2px solid #f3e5d6;outline-offset:7px}.dive:active{transform:scale(.96)}
@media(hover:hover){.dive:hover{background:#163c536b;box-shadow:0 0 32px #a5dfff26;transform:translateY(-3px)}}
@keyframes tide{from{transform:scale(1.005) translateY(0);filter:brightness(.95)}to{transform:scale(1.025) translateY(3px);filter:brightness(1.1)}}@keyframes stars{from{opacity:.2}to{opacity:.8}}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:700px){.opening{padding-top:32svh;padding-bottom:8svh}.ocean-image,.water{background-size:100% auto;background-position:center 57%}.date{font-size:.875rem}.ornament{margin:18px auto 22px}h1{font-size:clamp(4rem,6.4vw,6rem)}.message{font-size:1.7rem}.dive{width:104px;height:104px;margin-top:34px}.wave{margin-top:18px}}
@media(max-width:360px){.message{font-size:1rem}.opening{padding-inline:12px}.date{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media(min-width:700px){.scenery::before{content:"";position:absolute;inset:-25px;background:linear-gradient(#03132466,#03132477),url("/assets/moonlit-ocean.webp") center 60%/cover;filter:blur(20px)}.ocean-image,.water{width:min(100%,90svh);margin-inline:auto;background-size:auto 100%;background-position:center;background-repeat:no-repeat;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}.water{clip-path:inset(58% 0 0)}.shade{background:linear-gradient(transparent 26%,#03132466 48%,transparent 85%)}.opening{padding-top:30svh}}

/* Mobile refinement: quieter title and softly supported foreground details. */
@media(max-width:699px){
  h1{font-size:clamp(2.42rem,10.912vw,5.06rem)}
  .message{position:relative;isolation:isolate;color:#f7ecdf;text-shadow:0 1px 3px #001020e6,0 2px 12px #001020cc}
  .message::before{content:"";position:absolute;z-index:-1;inset:-24px -20px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(2,16,31,.64) 0%,rgba(2,16,31,.42) 35%,rgba(2,16,31,.12) 60%,transparent 75%)}
  .dive{color:#e0f3fc;border-color:#d1edfa;background:rgba(4,27,46,.58);text-shadow:0 1px 5px #001020b3;box-shadow:0 0 22px #a5dfff12,inset 0 0 20px #a5dfff09;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .dive svg{stroke-width:1.45;filter:drop-shadow(0 1px 3px #00102099)}
}