:root{--lime:#C4C860;--red:#be3519;--orange:#dd7d23;--olive:#76783a;--body:'Barlow',Arial,sans-serif;--script:'Wedding Script','Brush Script MT',cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip;margin:0;background:var(--lime);color:var(--orange);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit;text-underline-offset:.11em}
a:hover{opacity:.82}
:focus-visible{outline:2px solid var(--red);outline-offset:5px}
::selection{color:var(--lime);background:var(--red)}
.skip-link{position:fixed;z-index:10;left:12px;top:12px;background:var(--lime);color:var(--red);padding:12px;font-size:16px}
.skip-link:not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}
.wedding-page{max-width:1180px;margin:0 auto;container-type:inline-size;overflow:visible}
.wedding-page>section{position:relative}
/* Align the visible artwork bases, accounting for the PNGs' transparent margins.
   Palm ink height is exactly 1.75 times the gazebo ink height. */
.hero{height:56.3187cqw;--pavilion-left:28cqw;--palm-inset:calc(.5cqw - max(0px,(100vw - 1180px) / 2));--date-left:max(5.77cqw,calc(var(--palm-inset) + var(--palm-width) * .3657407407 + 1cqw));--pavilion-width:44.5cqw;--pavilion-top:22.8cqw;--art-base:calc(var(--pavilion-top) + var(--pavilion-width) * .6734006734);--palm-width:calc(var(--pavilion-width) * 0.861413568713)}
.palm{position:absolute;width:var(--palm-width);top:calc(var(--art-base) - var(--palm-width) * 1.3287037037);pointer-events:none}
.palm-left{left:var(--palm-inset);transform:scaleX(-1)}
.palm-right{right:var(--palm-inset)}
.hero h1{position:absolute;left:28.3cqw;top:5.15cqw;width:44.5cqw;z-index:2;line-height:1}
.wordmark{width:100%;filter:drop-shadow(.15cqw 0 0 var(--lime)) drop-shadow(-.15cqw 0 0 var(--lime)) drop-shadow(0 .15cqw 0 var(--lime)) drop-shadow(0 -.15cqw 0 var(--lime))}
.pavilion{position:absolute;width:var(--pavilion-width);left:var(--pavilion-left);top:var(--pavilion-top);z-index:1}
/* A small vector gull flies to the exact finial tip, then folds its wings. */
.seagull{position:absolute;left:calc(var(--pavilion-left) + var(--pavilion-width) * .5077441077);top:calc(var(--pavilion-top) + var(--pavilion-width) * .0303030303);width:calc(var(--pavilion-width) * .135);aspect-ratio:96/80;transform:translate(-50%,-100%);z-index:3;pointer-events:none}
.seagull-bird{display:block;width:100%;height:100%;overflow:visible}
.seagull-flight{width:100%;height:100%;transform-origin:50% 100%;animation:gull-arrival 3.8s cubic-bezier(.2,.65,.3,1) .25s both}
.gull-wing-near{transform-origin:39px 50px;animation:gull-flap-near .48s ease-in-out .25s 7}
.gull-wing-far{transform-origin:50px 47px;animation:gull-flap-far .48s ease-in-out .25s 7}
.gull-flying-wings{animation:gull-wings-land 3.8s linear .25s both}
.gull-folded-wing{animation:gull-fold-wing 3.8s linear .25s both}
.gull-legs{transform-origin:48px 64px;animation:gull-lower-feet 3.8s linear .25s both}
@keyframes gull-arrival{0%{opacity:0;transform:translate(-65vw,-2cqw) rotate(-9deg)}6%{opacity:1}35%{transform:translate(-35vw,-5cqw) rotate(5deg)}65%{transform:translate(-9cqw,-3cqw) rotate(-3deg)}85%{transform:translate(-1.5cqw,-1.4cqw) rotate(4deg)}94%{transform:translate(0,-.2cqw) rotate(0)}98%{transform:translate(0,.08cqw) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes gull-flap-near{0%,100%{transform:rotate(-12deg) scaleY(1)}50%{transform:rotate(29deg) scaleY(.45)}}
@keyframes gull-flap-far{0%,100%{transform:rotate(12deg) scaleY(1)}50%{transform:rotate(-26deg) scaleY(.45)}}
@keyframes gull-wings-land{0%,84%{opacity:1}94%,100%{opacity:0}}
@keyframes gull-fold-wing{0%,84%{opacity:0}94%,100%{opacity:1}}
@keyframes gull-lower-feet{0%,68%{transform:translateY(-7px) scaleY(.7)}90%,100%{transform:translateY(0) scaleY(1)}}
.date-location{position:absolute;left:var(--date-left);bottom:calc(100% - var(--art-base) - .252em);font-size:min(1.76cqw,calc((31.7cqw - var(--date-left)) * .09));line-height:1.5;font-weight:700;letter-spacing:.015em;text-transform:uppercase}
.date-location sup{font-size:.62em}
/* A small outline adds weight without changing the original font or line breaks. */
.wedding-page>section:not(.hero){-webkit-text-stroke:.15px currentColor}
.copy{text-align:center;text-transform:uppercase;font-size:1.335cqw;line-height:1.5;letter-spacing:.025em;font-weight:400}
.copy h3{color:var(--olive);font-size:1.51cqw;line-height:1.25;font-weight:700;text-decoration:underline;text-underline-offset:.12em;margin-bottom:1.12cqw}
.copy p{margin:0 0 2cqw}
.copy strong{font-weight:600}
.underlined{text-decoration:underline;text-underline-offset:.1em}
/* Exact supplied lettering, converted to vector paths for crisp edges. */
.art-title{position:absolute;line-height:0;color:var(--red);overflow:visible}
.art-title img{width:100%;height:auto}
.details{height:57.6923cqw;overflow:visible}
.details-title{left:62cqw;top:3cqw;width:31.7cqw}
.waiter-one{position:absolute;left:-4.6cqw;top:2.6cqw;width:16.2cqw}
.schedule{position:absolute;left:12.1cqw;top:10.7cqw;width:38cqw}
.travel{position:absolute;left:53.8cqw;top:10.7cqw;width:37.9cqw}
.waiter-two{position:absolute;left:82.5cqw;top:30.5cqw;width:29.25cqw;max-width:none;pointer-events:none}
.attire{height:54.9451cqw}
.attire-title{left:65.5cqw;top:4.8cqw;width:27cqw}
.welcome-attire{position:absolute;left:5.8cqw;top:7.05cqw;width:42.4cqw}
.loungers{position:absolute;left:5.9cqw;top:24.05cqw;width:20.8cqw}
.outfit-link{position:absolute;left:27.7cqw;top:31cqw;width:20.6cqw}
.wedding-attire{position:absolute;left:51.3cqw;top:12.65cqw;width:40.5cqw}
/* Explicit centered line breaks reproduce the supplied desktop reference. */
.attire-line-group{display:block}
.attire-line{display:block;white-space:nowrap}
.attire-phrase{white-space:nowrap}
.wedding-attire p{margin-bottom:2.3cqw}
.wedding-attire .attire-men{margin-bottom:3.6cqw}
.wedding-attire p:last-child{margin-bottom:0}
.rsvp{height:52.1978cqw}
/* The scene stays in place; equal opposite rotations keep the photo upright. */
.couple-scene{position:absolute;left:13cqw;top:9.6cqw;width:29.4cqw;height:35cqw;--oval-angle:30deg;--photo-counter:-30deg}
.couple-frame{position:absolute;inset:0;overflow:hidden;border-radius:50%;transform:rotate(var(--oval-angle));transition:transform .18s linear;will-change:transform}
.couple-photo{position:absolute;max-width:none;width:114%;height:105%;left:-7%;top:-2.5%;object-fit:cover;object-position:46% center;transform:rotate(var(--photo-counter));transition:transform .18s linear;will-change:transform}
.rsvp-title{left:72.9cqw;top:5.2cqw;width:18.5cqw}
.rsvp-copy{position:absolute;left:56.5cqw;top:18cqw;width:29.9cqw;font-size:1.49cqw;line-height:1.53}
.rsvp-copy p{margin-bottom:2.3cqw}
/* All three actions use the former registry button's size and a pill outline. */
.action-box,.rsvp-button{display:inline-flex;align-items:center;justify-content:center;gap:.5cqw;width:14.853cqw;height:4.4cqw;padding:.6cqw .7cqw;color:var(--red);background:#fbf4e7;border:1.5px solid var(--red);border-radius:100px;text-decoration:none;font-size:1.4cqw;line-height:1.2;font-weight:600;text-transform:none;white-space:nowrap;box-shadow:3px 3px 0 rgba(118,120,58,.22);transition:transform .2s,box-shadow .2s}
.action-box:hover,.rsvp-button:hover{opacity:1;transform:translateY(-2px);box-shadow:4px 5px 0 rgba(118,120,58,.25)}
.rsvp-button{position:relative}
.tiki-torch{position:absolute;bottom:-1.6cqw;width:2.8cqw;height:7.7cqw;overflow:visible;pointer-events:none}
.torch-left{left:-.8cqw;transform:rotate(-7deg)}
.torch-right{right:-.8cqw;transform:rotate(7deg)}
.torch-flame{opacity:0;transform:scaleY(.25);transform-box:fill-box;transform-origin:center bottom;transition:opacity .18s,transform .24s;filter:drop-shadow(0 0 4px #ffbd42)}
.rsvp-button:is(:hover,:focus-visible,:active) .torch-flame{opacity:1;transform:scaleY(1);animation:torch-flicker .75s ease-in-out .24s infinite alternate}
@keyframes torch-flicker{0%{transform:scale(.94,1.02) rotate(-2deg)}50%{transform:scale(1.04,.96) rotate(2deg)}100%{transform:scale(.98,1.06) rotate(-1deg)}}
.outfit-link.action-box{gap:.4cqw;padding:.35cqw .55cqw}
.outfit-label{line-height:1.05;white-space:normal}
.toast-glasses{width:4cqw;height:2.9cqw;overflow:visible;flex-shrink:0}
.glass{transform-box:view-box;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.glass-left{transform-origin:32px 63px}
.glass-right{transform-origin:89px 63px}
.clink-rays{opacity:0;transition:opacity .2s .16s}
.outfit-link:is(:hover,:focus-visible,:active) .glass-left{transform:translateX(2px) rotate(12deg)}
.outfit-link:is(:hover,:focus-visible,:active) .glass-right{transform:translateX(-2px) rotate(-12deg)}
.outfit-link:is(:hover,:focus-visible,:active) .clink-rays{opacity:1}
/* The decorative hearts never intercept clicks or enter the reading order. */
.registry-button{position:relative;overflow:visible}
.registry-hearts{position:absolute;left:0;right:0;bottom:calc(100% - 4px);height:0;pointer-events:none}
.floating-heart{position:absolute;left:var(--heart-x);bottom:0;width:1.1cqw;height:1.1cqw;opacity:0;transform:translateX(-50%) scale(.45)}
.registry-button:is(:hover,:focus-visible,:active) .floating-heart{animation:heart-rise 1.9s ease-out var(--heart-delay) infinite}
@keyframes heart-rise{0%{opacity:0;transform:translate(-50%,0) scale(.45) rotate(0)}15%{opacity:.95}70%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--heart-drift)),-5.5cqw) scale(1.08) rotate(var(--heart-tilt))}}
.registry{height:63cqw}
.sun{position:absolute;left:3.5cqw;top:4.3cqw;width:37cqw}
.registry-title{left:69.5cqw;top:9.4cqw;width:24cqw}
.registry-copy{position:absolute;left:37.8cqw;top:18.5cqw;width:29.2cqw;font-size:1.49cqw;line-height:1.54}
.registry-copy p{margin-bottom:2.3cqw}
.registry-copy .thanks{margin-top:2.7cqw}
/* The original phone composition is rebuilt with real text and individual artwork. */
@media(max-width:600px){
 .wedding-page{width:100%;overflow:hidden}
 .wedding-page>section{height:auto}
 .copy{font-size:clamp(14px,3.5cqw,21px);line-height:1.55;letter-spacing:.025em}
 .copy h3{font-size:clamp(15px,3.8cqw,23px);line-height:1.3;margin-bottom:4cqw}
 .copy p{margin-bottom:6cqw}
 .art-title{position:relative;left:auto;top:auto;width:100%;line-height:0}
 .hero{height:150cqw!important;--pavilion-left:18cqw;--pavilion-width:64cqw;--pavilion-top:76cqw}
 .hero h1{left:8cqw;top:10cqw;width:84cqw}
 .palm-left{left:1cqw}
 .palm-right{right:1cqw}
 .pavilion{left:var(--pavilion-left)}
 .date-location{left:8cqw;top:131cqw;bottom:auto;font-size:3.7cqw;line-height:1.5}
 .details{padding:4cqw 7cqw 12cqw;display:grid;grid-template-columns:1fr;gap:8cqw}
 .details-title{margin-bottom:0}
 .schedule,.travel{position:relative;left:auto;top:auto;width:auto}
 .schedule{padding-left:24.5cqw}
 .waiter-one{left:2cqw;top:28cqw;width:25.5cqw}
 .travel{padding:5cqw 27cqw 0 0}
 .waiter-two{left:auto;right:-7cqw;top:auto;bottom:17cqw;width:58.5cqw}
 .attire{padding:7cqw 7cqw 13cqw;display:grid;grid-template-columns:34cqw 1fr;column-gap:6cqw;row-gap:7cqw;align-items:center}
 .attire-title{grid-column:1/-1}
 .welcome-attire{position:relative;left:auto;top:auto;width:auto;grid-column:1/-1}
 .loungers{position:relative;left:auto;top:auto;width:34cqw;grid-column:1;grid-row:3}
 .outfit-link{position:relative;left:auto;top:auto;grid-column:2;grid-row:3;justify-self:center}
 .wedding-attire{position:relative;left:auto;top:auto;width:auto;grid-column:1/-1}
 .attire-line{display:inline;white-space:normal}
 .attire-line-group{text-wrap:balance}
 .wedding-attire p{margin-bottom:6cqw}
 .wedding-attire .attire-men{margin-bottom:8cqw}
 .action-box,.rsvp-button{width:calc(7.2em + 42px);height:max(46px,calc(1.2em + 26px));padding:8px 10px;gap:5px;font-size:clamp(14px,3.7cqw,20px);text-align:center}
 .rsvp{padding:10cqw 8cqw 14cqw;display:flex;flex-direction:column;align-items:center;gap:6cqw}
 .rsvp-title{order:0;align-self:flex-end;width:47cqw;margin-right:3cqw}
 .rsvp-copy{order:1;position:relative;left:auto;top:auto;width:100%;font-size:clamp(14px,3.7cqw,22px);line-height:1.55}
 .rsvp-copy p{margin-bottom:6cqw}
 .outfit-link.action-box{padding:5px 8px;gap:5px}
 .outfit-label{font-size:min(1em,18px)}
 .toast-glasses{width:36px;height:26px}
 .floating-heart{width:13px;height:13px}
 .tiki-torch{width:25px;height:69px;bottom:-14px}
 .torch-left{left:-6px}
 .torch-right{right:-6px}
 .couple-scene{order:2;position:relative;left:auto;top:auto;width:57cqw;height:72cqw;margin-top:7cqw;max-width:320px;max-height:405px}
 .registry{padding:18cqw 8cqw 16cqw}
 .registry-title{margin-left:36cqw;margin-bottom:15cqw;width:48cqw}
 .sun{left:1cqw;top:14cqw;width:42cqw}
 .registry-copy{position:relative;left:auto;top:auto;width:auto;font-size:clamp(14px,3.7cqw,22px);line-height:1.55}
 .registry-copy p{margin-bottom:6cqw}
 .registry-copy .thanks{margin-top:9cqw}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .seagull-flight,.gull-wing-near,.gull-wing-far,.gull-flying-wings,.gull-folded-wing,.gull-legs{animation:none!important;transform:none}
 .gull-flying-wings{opacity:0}
 .gull-folded-wing{opacity:1}
 .glass,.clink-rays,.action-box,.rsvp-button,.torch-flame,.floating-heart,.couple-frame,.couple-photo{transition:none;animation:none!important}
 .registry-button:is(:hover,:focus-visible,:active) .floating-heart{opacity:1;transform:translate(-50%,-10px) scale(.8)}
 .outfit-link:is(:hover,:focus-visible,:active) .glass-left,.outfit-link:is(:hover,:focus-visible,:active) .glass-right{transform:none}
}
@media(min-width:601px) and (max-width:1180px){.waiter-one{left:.25cqw}.schedule{left:17.5cqw;width:32.6cqw}.waiter-two{left:77.8cqw}.travel{width:33.4cqw}}
@media print{.skip-link{display:none}.wedding-page{max-width:100%;width:100%}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}