.surface-invite{position:relative;display:block;width:230px;height:172px;margin:20px 0 0 auto;text-decoration:none;color:#174454;isolation:isolate}
#ocean .invitation-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr);gap:32px;align-items:center;max-width:1400px}.invite-details{font:14px/1.9 var(--sans);color:#c4d9da;margin:24px 0}.deep-invite{position:relative;display:block;width:100%;max-width:430px;aspect-ratio:1;justify-self:center;text-decoration:none;isolation:isolate;color:#153f51}.deep-invite::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#f6e7b340,transparent 68%);animation:invitation-light 4s ease-in-out infinite;pointer-events:none}.invite-rock{position:absolute;left:0;right:0;bottom:5%;height:28%;background:#396a80;clip-path:polygon(9% 35%,30% 8%,65% 0,89% 26%,100% 78%,79% 100%,10% 94%,0 66%)}.invite-rock::after{content:"";position:absolute;inset:0;background:#264e68;clip-path:polygon(30% 8%,53% 52%,100% 78%,79% 100%,10% 94%,0 66%,9% 35%)}.envelope{position:absolute;inset:25% 14% 23%;transform:rotate(-7deg);filter:drop-shadow(0 8px 2px #001e3655)}.invite-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#e8dcbb;font:12px var(--sans)}.surface-invite:focus-visible,.deep-invite:focus-visible{outline:2px solid #f1d59d;outline-offset:6px}.surface-invite,.deep-invite{z-index:5;touch-action:manipulation}@keyframes invitation-light{50%{opacity:.55;transform:scale(.94)}}
@media(max-width:820px){#ocean .invitation-layout{grid-template-columns:1fr;gap:10px}.deep-invite{max-width:340px}.surface-invite{width:200px;height:150px;margin:25px 0 0}}
@media(prefers-reduced-motion:reduce){.deep-invite::before{animation:none}}

/* 24 September 2026: the same blue invitation identity as the quiz. */
.surface-invite{width:260px;height:195px;color:#fff0d6}.clam-art{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s}.surface-caption{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font:13px/1.5 var(--sans);color:#fff0d6;text-shadow:0 2px 5px #062f43}.surface-invite:is(:hover,:focus-visible) .clam-art{transform:translateY(-5px) rotate(-2deg)}
.envelope-art{position:absolute;left:8%;top:8%;width:84%;height:78%;object-fit:contain;transform:rotate(-6deg);transition:transform .35s;filter:drop-shadow(0 8px 3px #001e3640)}.deep-invite:is(:hover,:focus-visible) .envelope-art{transform:translateY(-8px) rotate(-3deg)}
@media(max-width:820px){.surface-invite{width:230px;height:175px}}
@media(prefers-reduced-motion:reduce){.clam-art,.envelope-art{transition:none}}