/* Guest invitation: photographic ceremony paper, independent from the editor. */
.event-website { --event-accent:#425b47; --event-paper:#fff; --event-ink:#27372d; --event-muted:#596653; --event-line:#cbd1c4; container-type:inline-size; background:var(--event-paper); color:var(--event-ink); font:400 16px/1.9 var(--body); overflow:clip; text-align:center; }
.event-website.card-rose { --event-accent:#784957; --event-ink:#492e37; --event-muted:#785d67; --event-line:#dfcdd3; }
.event-website.card-gold { --event-accent:#79602e; --event-ink:#423820; --event-muted:#736548; --event-line:#ddd3bd; }
.event-website.card-clay { --event-accent:#87523d; --event-ink:#493327; --event-muted:#7a6457; --event-line:#e0d0c5; }
.event-website ::selection { color:#fff; background:var(--event-accent); }
.event-website :is(a,button,input,textarea):focus-visible,.site-intro button:focus-visible { outline:2px solid var(--event-accent,#425b47); outline-offset:5px; }
.event-website :is(h1,h2,h3,p,legend,label) { overflow-wrap:anywhere; }
.event-website h2 { margin:0 0 28px; font:400 clamp(25px,4.8cqw,44px)/1.6 var(--display); text-wrap:balance; }
.event-website h3 { font:400 24px/1.8 var(--display); margin:0 0 16px; }
.event-website p { max-width:65ch; margin:0 auto 24px; white-space:pre-wrap; }
.event-cover { position:relative; display:grid; place-items:center; min-height:660px; min-height:clamp(460px,100cqw,780px); isolation:isolate; color:#fff; background:#26392f; padding:80px 30px; }
.event-cover::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0e1f1729,#10231a99); }
.event-cover.without-photo { background:var(--event-accent); }
.event-cover-image { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.event-cover-image img,.story-photo img,.gallery-photo-frame img,.media-thumb img { position:absolute; max-width:none; transform-origin:center; }
.event-cover-text { width:100%; }
.event-cover-text .card-people { display:block; margin:24px auto; max-width:16ch; font:400 clamp(36px,8cqw,90px)/1.6 var(--display); letter-spacing:-.02em; }
.event-cover-text p { font-size:16px; }
.event-cover-date { font-variant-numeric:tabular-nums; }
.event-section-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; padding:20px 24px; border-bottom:1px solid var(--event-line); }
.event-section-nav a { color:var(--event-accent); padding:6px 0; font-size:13px; text-underline-offset:6px; }
.event-section-nav a:hover { text-decoration:underline; }
.site-section { padding:80px max(28px,8cqw); scroll-margin-top:24px; }
.site-section + .site-section { border-top:1px solid var(--event-line); }
.site-invitation { display:grid; grid-template-columns:1fr; align-items:center; gap:60px; }
.site-portrait { margin:0; background:#e8ece6; }
.event-website .card-event-date { margin:24px 0 12px; font-size:18px; }
.event-names-repeat { font:400 30px/1.8 var(--display); color:var(--event-accent); }
.site-action { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 22px; border:1px solid var(--event-accent); background:transparent; color:var(--event-accent); border-radius:4px; font:400 14px/1.6 var(--body); cursor:pointer; text-decoration:none; }
.site-action:hover { background:var(--event-accent); color:#fff; }
.countdown-values { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:560px; margin:auto; }
.countdown-values strong { display:block; font:400 clamp(32px,7cqw,58px)/1.4 var(--display); font-variant-numeric:tabular-nums; color:var(--event-accent); }
.countdown-values span { display:block; font-size:13px; color:var(--event-muted); }
.site-schedule ol { max-width:540px; margin:auto; padding:0; list-style:none; text-align:start; }
.site-schedule li { display:grid; grid-template-columns:70px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--event-line); }
.site-schedule time { color:var(--event-accent); font-variant-numeric:tabular-nums; }
.site-story { display:grid; align-items:center; gap:48px; }
.story-photo { position:relative; overflow:hidden; aspect-ratio:3/4; }
.site-rsvp form { text-align:start; max-width:560px; margin:auto; }
.site-rsvp .form-disclosure { color:var(--event-muted); }
.site-rsvp :is(input:not([type=radio]):not([type=checkbox]),textarea) { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--event-line); background:#fff; color:var(--event-ink); font:400 16px/1.8 var(--body); border-radius:4px; caret-color:var(--event-accent); }
.site-rsvp textarea { min-height:100px; resize:vertical; }
.site-rsvp input { accent-color:var(--event-accent); }
.site-rsvp .guest-choice { min-height:44px; margin:0; }
.site-rsvp .guest-question legend { font-size:15px; }
.site-venue .inline-actions { justify-content:center; margin:24px 0 40px; }
.site-address { color:var(--event-muted); }
.event-website .copy-notice { font-size:13px; margin:12px 0; }
.site-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.gallery-photo { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.gallery-photo-frame { display:block; position:relative; overflow:hidden; aspect-ratio:4/3; background:#e7ebe4; }
.gallery-photo:hover .gallery-photo-frame { filter:brightness(.9); }
.dress-swatches { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin:32px 0 0; padding:0; list-style:none; }
.dress-swatches li { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:120px; font-size:14px; }
.dress-dot { display:block; width:64px; height:64px; border:1px solid #27372d40; border-radius:50%; }
.event-footer { padding:70px 24px; background:var(--event-accent); color:#fff; font:400 24px/1.8 var(--display); }
.event-footer p:last-child { margin:0 auto; font-size:32px; }
.site-music .music-slot { margin:0 auto 20px; max-width:680px; }
.site-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:70px 64px 80px; border:0; background:#101711f5; color:#fff; overflow:hidden; }
.site-lightbox::backdrop { background:#101711; }
.site-lightbox[open] { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:16px; }
.lightbox-stage { position:relative; min-width:0; min-height:0; overflow:hidden; }
.lightbox-image { position:absolute; max-width:none; transform-origin:center; }
.site-lightbox .lightbox-caption { margin:0 auto; font:400 14px/1.8 var(--body); text-align:center; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid #ffffff80; border-radius:4px; padding:8px; color:#fff; background:#101711; cursor:pointer; font:400 14px/1.5 var(--body); }
.lightbox-close { top:16px; right:20px; }.lightbox-prev { left:12px; top:45%; }.lightbox-next { right:12px; top:45%; }
.site-lightbox button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.site-lightbox svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.slot-editor + .slot-editor { border-top:1px solid var(--line); padding-top:28px; margin-top:36px; }
.slot-editor h3 { font:500 18px/1.7 var(--body); margin-bottom:16px; }
.media-edit-item { padding:24px 0; border-top:1px solid var(--line); }
.media-edit-item h4 { font-size:16px; margin:0 0 16px; font-weight:500; }
.media-thumb { position:relative; overflow:hidden; aspect-ratio:4/3; max-width:180px; margin-bottom:16px; background:#e7ebe4; }
.media-edit-item .inline-actions { margin-bottom:20px; }
.crop-details summary { color:var(--forest); cursor:pointer; min-height:44px; padding:8px 0; text-decoration:underline; text-underline-offset:4px; }
.dress-edit-row { display:grid; grid-template-columns:74px minmax(0,1fr) auto; gap:12px; align-items:center; }
.dress-edit-row .editor-field { margin-bottom:24px; }
.dress-edit-row input[type=color] { padding:4px; height:46px; cursor:pointer; }
.full-card-preview { max-width:1328px; }
#full-card { max-width:none; }
.site-intro { --event-accent:#425b47; --event-ink:#27372d; text-align:center; background:#f2f5f0; color:var(--event-ink); font:400 16px/1.8 var(--body); }
.envelope-scene { min-height:80svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; }
.intro-names { max-width:18ch; margin:0 auto 12px; overflow-wrap:anywhere; font:400 clamp(30px,5vw,56px)/1.6 var(--display); }
.intro-date,.intro-instruction { margin:0 0 20px; font-size:14px; }
.opening-envelope { display:block; position:relative; width:min(100%,480px); aspect-ratio:1.6; margin:30px auto; border:1px solid #a2b09c; background:#d7dfd1; cursor:pointer; perspective:1000px; box-shadow:0 18px 38px #233f2921; }
.envelope-letter { position:absolute; inset:15% 10% 0; display:grid; place-items:center; padding:12px; background:#fff; font:400 22px/1.7 var(--display); transition:transform .65s cubic-bezier(.16,1,.3,1); }
.envelope-front { position:absolute; inset:0; background:#dce4d7; clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%); }
.envelope-flap { position:absolute; inset:0; background:#c4d0bc; clip-path:polygon(0 0,100% 0,50% 53%); transform-origin:top; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.envelope-seal { position:absolute; width:64px; height:64px; top:42%; left:calc(50% - 32px); display:grid; place-items:center; border-radius:50%; color:#fff; background:#607150; font:400 22px/1 var(--display); transition:opacity .2s; }
.is-opening .envelope-flap { transform:rotateX(180deg); }.is-opening .envelope-letter { transform:translateY(-30%); }.is-opening .envelope-seal { opacity:0; }
.intro-skip { min-height:44px; padding:10px 20px; border:1px solid currentColor; border-radius:4px; color:inherit; background:transparent; font:400 14px/1.6 var(--body); cursor:pointer; }
.video-scroll-stage { height:260svh; position:relative; background:#0c1912; color:#fff; }
.video-intro-sticky { position:sticky; top:0; height:100svh; min-height:420px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 24px; }
video.intro-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.video-intro-sticky::before { content:''; position:absolute; inset:0; background:#07130966; z-index:-1; }
.video-intro-copy { max-width:700px; }
.video-intro-status { max-width:64ch; padding:8px 12px; margin:30px 0 16px; background:#0c1912d9; font-size:13px; }
.video-unavailable { height:auto; }.video-unavailable .video-intro-sticky { position:relative; min-height:420px; height:auto; }
@container (min-width:700px) { .site-invitation:has(.site-portrait) { grid-template-columns:1fr 1.1fr; text-align:start; }.site-story:has(.story-photo) { grid-template-columns:1fr 1.15fr; text-align:start; } }
@container (max-width:500px) { .site-section { padding:52px 24px; }.site-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.countdown-values { gap:8px; }.dress-swatches { gap:20px; }.site-invitation,.site-story { gap:32px; }.event-cover { min-height:510px; }.event-cover-text .card-people { font-size:38px; } }
@media(max-width:540px) { .site-lightbox { padding:74px 54px; }.dress-edit-row { grid-template-columns:70px minmax(0,1fr); }.dress-edit-row > button { grid-column:2; justify-self:end; margin-bottom:24px; }.envelope-scene { min-height:75svh; }.envelope-seal { width:52px; height:52px; left:calc(50% - 26px); }.intro-names { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { .opening-envelope * { transition:none; } }
.site-intro.card-rose { --event-accent:#784957; --event-ink:#492e37; }.site-intro.card-gold { --event-accent:#79602e; --event-ink:#423820; }.site-intro.card-clay { --event-accent:#87523d; --event-ink:#493327; }
.site-intro { background:color-mix(in srgb,var(--event-accent) 5%,white); }
.opening-envelope { background:color-mix(in srgb,var(--event-accent) 18%,white); border-color:color-mix(in srgb,var(--event-accent) 50%,white); }
.envelope-front { background:color-mix(in srgb,var(--event-accent) 16%,white); }.envelope-flap { background:color-mix(in srgb,var(--event-accent) 30%,white); }.envelope-seal { background:var(--event-accent); }
.video-intro-sticky button:focus-visible { outline-color:#fff; }