
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--rose:#ad4f75;--deep:#602d47;--pale:#fff5f3;--soft:#f9d8dc;--white:#fffdf9;--line:#f0b9c9}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',Arial,sans-serif;color:var(--deep);background:#e97998 url('assets/bkgr.svg') center center /cover fixed no-repeat}
a{color:inherit}
button,input{font:inherit}
.site-nav{position:fixed;z-index:40;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(12px,3vw,34px);background:rgba(255,246,247,.92);border:1px solid rgba(255,255,255,.94);padding:11px 27px;border-radius:999px;box-shadow:0 9px 35px #63274430;backdrop-filter:blur(14px)}
.site-nav a{text-decoration:none;text-transform:uppercase;white-space:nowrap;letter-spacing:.18em;font-size:11px;font-weight:700;color:#91556a;position:relative;padding:6px 0}
.site-nav a[aria-current='page']{color:#762c50}
.site-nav a[aria-current='page']:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#a63f70;border-radius:5px;box-shadow:0 1px 7px #a63f7090}
.site-nav a:hover{color:#a63f70}
.layout{min-height:100svh;padding:110px 20px 45px;display:grid;place-items:center}
.paper{width:min(100%,830px);padding:clamp(16px,3.2vw,35px);border-radius:18px;background:rgba(255,250,249,.84);border:1px solid #ffffffb8;box-shadow:0 25px 75px #6d294b40,0 0 0 7px #ffffff26;position:relative}
.paper:before{content:'';position:absolute;inset:11px;border:1px solid #d795aa;border-radius:12px;pointer-events:none}
.eyebrow{font-size:11px;letter-spacing:.28em;color:#a05172;text-transform:uppercase;font-weight:700}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
h1{font-size:clamp(40px,7vw,76px);line-height:1;margin:12px 0}
.lead{font-size:14px;line-height:1.7;color:#89556a;max-width:510px;margin:0 auto}
.action{appearance:none;border:0;border-radius:999px;min-height:42px;display:inline-grid;place-items:center;text-decoration:none;padding:12px 24px;background:#a94f77;color:#fff;font-size:12px;font-weight:700;letter-spacing:.07em;cursor:pointer;box-shadow:0 9px 20px #943f6140;transition:transform .2s,background .2s}
.action:hover{transform:translateY(-2px);background:#893659}
.action:disabled{opacity:.58;cursor:not-allowed}
.home-layout .paper{max-width:730px;text-align:center;padding:clamp(18px,3vw,28px)}
.home-title{margin:12px auto 17px;color:#742d4d}
.home-image{width:min(100%,480px);display:block;margin:auto;border-radius:7px;box-shadow:0 16px 38px #7c3f5033}
.home-buttons{margin:20px 0 7px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.subtle-link{align-self:center;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.rsvp-paper{max-width:710px;text-align:center;padding:clamp(30px,5vw,58px) clamp(24px,6vw,90px)}
.rsvp-paper h1{color:#873e5d}
.divider{height:1px;max-width:240px;margin:15px auto 25px;background:linear-gradient(to right,transparent,#d0809c,transparent)}
.rsvp-intro{font-size:13px;line-height:1.7;color:#88586a;margin:8px auto 22px;max-width:390px}
.search-row{display:flex;gap:10px}
.search-row input{min-width:0;flex:1;width:100%;border:1px solid #e6b4c5;background:#fff;border-radius:999px;min-height:46px;padding:0 19px;outline:none;color:#71364e}
.search-row input:focus{box-shadow:0 0 0 3px #e7a9c558;border-color:#be6588}
#search-btn{min-width:105px}
.form-status{margin:14px auto 0;font-size:12px;min-height:1em;color:#765164}
.form-status.error{color:#a13e5d}.form-status.success{color:#357451}
.guest-results{display:grid;gap:9px;max-height:270px;overflow:auto;overscroll-behavior:contain;padding:4px;margin:16px auto 0;border-radius:18px;scrollbar-color:#d17c9c #f9e8ee;scrollbar-width:thin}
.guest-results:empty{display:none}
.guest-result{background:#fff;border:1px solid #ebc5d0;box-shadow:0 4px 10px #a4596b12;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;text-align:left}
.guest-info{min-width:0}.guest-name{font-weight:700;font-size:13px;overflow-wrap:anywhere}.guest-family{font-size:11px;color:#9c7283;margin-top:3px}
.confirm-btn{background:#ad567b;border:0;border-radius:999px;color:#fff;padding:10px 15px;min-width:92px;font-size:11px;font-weight:700;cursor:pointer}
.confirm-btn.confirmed{background:#7b9879;cursor:default}
.confirm-panel{display:none}
.confirm-panel.show{display:block}
.confirm-panel h3{font-size:clamp(30px,5vw,46px);margin:4px 0 10px;color:#7b3553}
.confirm-panel p{font-size:14px;line-height:1.6}
.confirm-actions{display:flex;gap:12px;justify-content:center;margin-top:21px}
.confirm-actions button{border:none;border-radius:999px;padding:12px 20px;min-height:43px;font-size:12px;font-weight:700;cursor:pointer}
#yes-confirm{background:#a94f77;color:white}
#cancel-confirm{background:#f7dce4;color:#733b52}
.ornament-inner.confirm-mode #rsvp-title,.ornament-inner.confirm-mode #rsvp-search-area,.ornament-inner.confirm-mode .divider{display:none}
.ornament-inner.confirm-mode #confirm-panel{display:block}
.details-layout{display:block;min-height:100svh;padding-bottom:50px}
.details-head{text-align:center;color:#fffdf8;margin:8px auto 28px;text-shadow:0 3px 17px #a03867}
.details-head h1{margin:4px 0;font-size:clamp(45px,7vw,75px)}
.details-head p{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.gallery{width:min(100%,710px);display:grid;gap:26px;margin:auto}
.gallery figure{margin:0;padding:clamp(7px,1.5vw,13px);background:#fff6f5d9;border:1px solid white;border-radius:15px;box-shadow:0 12px 36px #5b1d3b3d}
.gallery img{display:block;width:100%;height:auto;border-radius:7px}
.gallery figcaption{font-size:12px;letter-spacing:.17em;text-transform:uppercase;text-align:center;color:#853d60;padding:15px 3px 5px;font-weight:700}
@media(max-width:700px){
body{background-attachment:scroll}
.site-nav{top:max(10px,env(safe-area-inset-top));padding:9px 20px;gap:18px}
.site-nav a{font-size:10px;letter-spacing:.12em}
.layout{padding:75px 11px 18px}
.home-layout{height:100dvh;min-height:0;overflow:hidden}
.home-layout .paper{max-height:calc(100dvh - 96px);overflow:hidden;padding:12px}
.home-layout .paper:before{inset:6px}
.home-title{font-size:clamp(24px,6vw,40px);margin:7px}
.home-image{max-height:calc(100dvh - 240px);width:auto;max-width:100%;object-fit:contain}
.home-buttons{margin:11px auto 2px;gap:11px}.action{min-height:38px;padding:10px 15px;font-size:11px}
.rsvp-layout{height:100dvh;min-height:0;overflow:hidden}
.rsvp-paper{padding:25px 20px;max-height:calc(100dvh - 96px);overflow:hidden}
.rsvp-paper h1{font-size:clamp(34px,7vw,49px);margin:3px 0}
.rsvp-intro{font-size:12px;margin-bottom:12px}.divider{margin:10px auto 17px}
.search-row{flex-direction:column}.search-row input{min-height:41px;flex:auto}#search-btn{min-height:39px}
.guest-results{max-height:min(30dvh,230px)}.guest-result{padding:9px 10px}.guest-name{font-size:12px}
.confirm-actions{flex-wrap:wrap}
.details-layout{padding:80px 10px 35px}
.gallery{gap:14px}
}
@media(max-height:650px) and (max-width:700px){
.home-title{display:none}.home-image{max-height:calc(100dvh - 175px)}
.rsvp-paper{padding:16px 16px}
.rsvp-intro{margin-bottom:8px}.divider{display:none}
.guest-results{max-height:21dvh}
}

/* Dress code invitation, displayed above traditions gallery */
.dresscode-image-card{width:min(100%,710px);margin:0 auto 26px;padding:clamp(7px,1.5vw,13px);background:#fff6f5d9;border:1px solid white;border-radius:15px;box-shadow:0 12px 36px #5b1d3b3d}
.dresscode-image-card img{display:block;width:100%;height:auto;border-radius:7px}


/* Dress code image uses the same card frame as gallery images. */
.dresscode-image-card {
  width: min(100%, 710px);
  margin: 0 auto 26px;
  padding: clamp(7px, 1.5vw, 13px);
  background: #fff6f5d9;
  border: 1px solid white;
  border-radius: 15px;
  box-shadow: 0 12px 36px #5b1d3b3d;
}
.dresscode-image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}
@media (max-width: 700px) {
  .dresscode-image-card { margin-bottom: 14px; }
}

/* Horizontal, touch-friendly Details card carousel */
.details-layout{overflow-x:hidden}
.gallery-shell{position:relative;width:min(100%,810px);margin:0 auto}
.gallery{width:100%;display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:12px 0 25px;scrollbar-width:thin;scrollbar-color:#ba6688 #f9dbe5}
.gallery figure{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;align-self:start;box-sizing:border-box}
.gallery img{height:auto;max-height:68svh;object-fit:contain;object-position:center;background:#ffffff33}
.gallery-arrow{position:absolute;z-index:2;top:43%;transform:translateY(-50%);width:42px;height:42px;border:1px solid #ffffffdd;border-radius:50%;color:#8a3b5f;background:#fff8f2ee;box-shadow:0 4px 16px #51203f44;cursor:pointer;font-size:19px}
.gallery-arrow.prev{left:-21px}.gallery-arrow.next{right:-21px}
.gallery-arrow:disabled{opacity:.2;cursor:default}
.gallery-hint{color:white;text-align:center;margin:0 auto 20px;font-size:12px;letter-spacing:.1em;text-shadow:0 2px 8px #703851}
@media(max-width:700px){.gallery-shell{width:100%}.gallery{gap:10px;padding:8px 0 16px;scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}.gallery img{max-height:67svh}.gallery-arrow{width:30px;height:30px;top:42%;font-size:14px}.gallery-arrow.prev{left:3px}.gallery-arrow.next{right:3px}}
