:root { --ink:#1f2925; --paper:#f4f0e9; --moss:#6a7565; --lime:#b9cf53; --line:rgba(31,41,37,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.hero { height:1080px; position:relative; overflow:hidden; color:#fff; isolation:isolate; background:#141a17; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; z-index:-3; background:#26312b; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(10,17,14,.56),rgba(10,17,14,.05) 65%),linear-gradient(0deg,rgba(10,17,14,.36),transparent 45%); }
.nav { padding:30px 5.5vw; display:flex; justify-content:space-between; align-items:center; }
.brand,.rsvp-link { color:inherit; text-decoration:none; font-size:12px; letter-spacing:.19em; font-weight:600; }
.brand span { font-size:10px; padding-left:6px; }
.rsvp-link { border-bottom:1px solid rgba(255,255,255,.7); padding-bottom:6px; }
.rsvp-link span { padding-left:8px; }
.hero-copy { position:absolute; inset:50% 5vw auto; transform:translateY(-50%); text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:10px; font-weight:700; margin:0 0 21px; }
.hero-mark { display:flex; align-items:center; gap:16px; margin-bottom:48px; }
.hero-mark img { height:58px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.hero-copy .eyebrow { margin-bottom:38px; }
.hero h1 { display:flex; flex-direction:column; align-items:center; gap:11px; font-family:"Bricolage Grotesque",sans-serif; font-weight:400; font-size:clamp(65px,9.3vw,145px); line-height:.72; letter-spacing:.01em; margin:0; }
h1 em { display:block; font-family:Corinthia,cursive; font-weight:700; font-size:1.2em; line-height:.47; letter-spacing:-.035em; }
.scroll-cue { color:#fff; text-decoration:none; display:flex; gap:10px; align-items:center; margin-top:76px; font-size:11px; letter-spacing:.11em; text-transform:uppercase; }
.scroll-cue span { width:38px; height:1px; background:#fff; display:block; animation:cue-pulse 2.2s ease-in-out infinite; }
.countdown { display:flex; justify-content:center; gap:clamp(15px,3.5vw,54px); margin-top:62px; }
.countdown div { display:grid; gap:5px; min-width:45px; }
.countdown b { font:400 clamp(30px,3.8vw,54px)/1 "Bricolage Grotesque",sans-serif; letter-spacing:.01em; }
.countdown span { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.hero-year { position:absolute; right:5.5vw; bottom:30px; margin:0; font-size:11px; letter-spacing:.16em; }
.hero .nav { animation:fade-in .9s ease both; }
.hero-mark { animation:rise-in .8s .18s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy .eyebrow { animation:rise-in .8s .32s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation:rise-in 1s .47s cubic-bezier(.2,.7,.2,1) both; }
.countdown { animation:rise-in .8s .64s cubic-bezier(.2,.7,.2,1) both; }
.scroll-cue,.hero-year { animation:fade-in .8s .85s ease both; }
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.gallery-card { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.gallery-card:hover { transform:translateY(-7px); }
@keyframes rise-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes cue-pulse { 0%,100% { width:38px; opacity:.55; } 50% { width:26px; opacity:1; } }
.gallery-card[data-reveal]:nth-child(6n+1) { transition-delay:0ms; }
.gallery-card[data-reveal]:nth-child(6n+2) { transition-delay:70ms; }
.gallery-card[data-reveal]:nth-child(6n+3) { transition-delay:140ms; }
.gallery-card[data-reveal]:nth-child(6n+4) { transition-delay:210ms; }
.gallery-card[data-reveal]:nth-child(6n+5) { transition-delay:280ms; }
.gallery-card[data-reveal]:nth-child(6n+6) { transition-delay:350ms; }
.event-grid div[data-reveal]:nth-child(1) { transition-delay:0ms; }
.event-grid div[data-reveal]:nth-child(2) { transition-delay:110ms; }
.event-grid div[data-reveal]:nth-child(3) { transition-delay:220ms; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } [data-reveal] { opacity:1; transform:none; } }
.gallery-section { padding:136px 0 113px; overflow:hidden; background:var(--paper); }
.gallery-intro { display:flex; justify-content:center; align-items:center; gap:48px; margin:0 0 54px; padding:0 5.5vw; }
.section-intro { width:min(420px,90vw); }
.video-frame { position:relative; display:block; width:min(220px,32vw); aspect-ratio:9/16; flex:0 0 auto; border:6px solid #111; border-radius:20px; overflow:hidden; padding:0; cursor:pointer; background:#111; box-shadow:0 24px 60px rgba(31,41,37,.22); transition:transform .3s ease; }
.video-frame:hover { transform:translateY(-4px); }
.video-frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }
.video-frame::after { content:''; position:absolute; inset:0; border-radius:14px; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.05) 45%,rgba(0,0,0,.6)); }
.video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.35); z-index:1; }
.video-play svg { width:16px; height:16px; fill:var(--ink); margin-left:2px; }
.video-frame-bar { position:absolute; left:14px; right:14px; bottom:14px; height:3px; border-radius:2px; background:rgba(255,255,255,.32); z-index:1; overflow:hidden; }
.video-frame-bar::after { content:''; position:absolute; left:0; top:0; bottom:0; width:26%; border-radius:2px; background:#fff; }
.eyebrow.dark { color:#65705e; }
h2 { font:400 clamp(45px,5.2vw,78px)/.95 "Bricolage Grotesque",sans-serif; letter-spacing:-.015em; margin:0; }
h2 i { font-family:Corinthia,cursive; font-weight:700; letter-spacing:-.03em; }
.section-intro > p:last-child,.event-note,.rsvp-copy > p:last-child { font-size:14px; line-height:1.8; color:#66706b; margin:28px 0 0; }
.gallery-wrap { position:relative; display:flex; align-items:center; gap:22px; padding:0 5.5vw; }
.gallery { display:flex; gap:18px; overflow:hidden; scroll-behavior:smooth; width:100%; }
.gallery-card { border:0; padding:0; flex:0 0 min(44vw,555px); aspect-ratio:1.27; overflow:hidden; background:#ddd; cursor:zoom-in; }
.gallery-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-card:hover img { transform:scale(1.05); }
.gallery-arrow { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:50%; height:43px; width:43px; flex:0 0 auto; cursor:pointer; font-size:19px; transition:.2s; }
.gallery-arrow:hover { background:var(--ink); color:#fff; }
.gallery-count { margin:23px 0 0 calc(5.5vw + 65px); font-size:11px; letter-spacing:.16em; }
.gallery-count span { font-weight:700; }
.details { background:#5c1416; color:#f4f0e9; padding:118px 11vw 105px; }
.details-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.details .eyebrow { color:#ed8d88; padding-top:8px; }
.event-grid { margin-top:76px; padding:27px 0; border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.event-grid div { display:grid; gap:13px; }
.event-grid div > span { text-transform:uppercase; letter-spacing:.17em; font-size:10px; color:#ed8d88; }
.event-grid strong { font:400 23px/1.27 "Bricolage Grotesque",sans-serif; letter-spacing:.005em; }
.event-note { max-width:540px; color:#ced4cf; margin:43px 0 0 auto; }
.rsvp { padding:130px 11vw; background:var(--paper); display:grid; grid-template-columns:1fr 1fr; gap:min(13vw,180px); }
.rsvp .eyebrow { color:#65705e; }
.rsvp-copy > p:last-child { max-width:310px; }
form { display:grid; grid-template-columns:1fr 1fr; gap:28px 22px; align-content:start; }
label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#5e6863; }
input,select { appearance:none; border:0; border-bottom:1px solid #9fa5a0; display:block; background:transparent; width:100%; padding:12px 0 11px; margin-top:6px; outline:0; font:400 15px "DM Sans",sans-serif; color:var(--ink); }
input:focus,select:focus { border-color:var(--ink); }
input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.guest-section { grid-column:1/-1; border:0; border-top:1px solid #b7b9b2; border-bottom:1px solid #b7b9b2; margin:8px 0 0; padding:26px 0 28px; }
.guest-section legend { padding:0 10px 0 0; text-transform:uppercase; letter-spacing:.15em; color:#5e6863; font-size:10px; font-weight:700; }
.guest-section > p { max-width:580px; margin:0 0 21px; color:#66706b; font-size:13px; line-height:1.7; }
.guest-question { display:block; text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; color:#5e6863; }
.guest-choice { display:flex; gap:18px; margin:12px 0 3px; }
.guest-choice label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.guest-choice input { appearance:auto; display:inline; width:auto; margin:0; accent-color:var(--ink); }
.guest-list { margin-top:25px; max-width:540px; border-top:1px solid #c7c8c2; }
.guest-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid #c7c8c2; }
.guest-row span { display:grid; gap:3px; }
.guest-row small { color:#65705e; text-transform:uppercase; letter-spacing:.13em; font-size:9px; font-weight:700; }
.guest-row strong { font:400 19px "Bricolage Grotesque",sans-serif; letter-spacing:.01em; }
.guest-row .guest-row-actions { display:flex; gap:14px; align-items:center; }
.edit-guest { border:0; padding:0; background:transparent; color:var(--ink); font:700 10px "DM Sans",sans-serif; letter-spacing:.14em; text-decoration:underline; text-underline-offset:4px; text-transform:uppercase; cursor:pointer; }
.remove-guest-row { border:0; padding:0; background:transparent; color:#8a3a3a; font:700 10px "DM Sans",sans-serif; letter-spacing:.14em; text-decoration:underline; text-underline-offset:4px; text-transform:uppercase; cursor:pointer; }
.guest-editor { margin-top:25px; display:grid; grid-template-columns:1fr; gap:16px; max-width:540px; }
.guest-editor label { min-width:0; }
#guest-list[hidden],#guest-editor[hidden],.guest-editor-actions[hidden],#add-guest[hidden],#cancel-guest[hidden],#add-another-guest[hidden] { display:none !important; }
.add-guest,form .add-guest { grid-column:auto; justify-self:start; border:0; background:var(--ink); padding:12px 15px; margin:18px 0 0; color:#fff; font:700 9px "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.add-guest:hover,form .add-guest:hover { background:#516057; color:#fff; }
.guest-editor-actions { display:flex; gap:12px; align-items:center; }
.guest-editor-actions .add-guest { margin:18px 0 0; }
.remove-guest { border:1px solid var(--line); background:transparent; padding:11px 15px; margin:18px 0 0; color:#8a3a3a; font:700 9px "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:.2s; }
.remove-guest:hover { background:#8a3a3a; border-color:#8a3a3a; color:#fff; }
form button { grid-column:1/-1; justify-self:start; border:0; padding:15px 22px; background:#5c1416; color:#fff; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; cursor:pointer; margin-top:8px; transition:.2s; }
form button:hover { background:#7a2529; } form button .btn-arrow { font-size:14px; padding-left:12px; }
.form-message { grid-column:1/-1; min-height:18px; margin:0; color:#526749; font-size:13px; }
.rsvp-logos { grid-column:1/-1; justify-self:center; margin-top:70px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center; }
.rsvp-logo-group { display:flex; align-items:center; gap:22px; }
.rsvp-logos img { height:34px; width:auto; }
.rsvp-logo-divider { width:1px; height:30px; background:var(--line); }
.lightbox { width:min(1100px,92vw); padding:0; background:#111; border:0; overflow:visible; }
.lightbox::backdrop { background:rgba(12,16,14,.86); backdrop-filter:blur(8px); }
.lightbox img { width:100%; display:block; max-height:82vh; object-fit:contain; }
.close,.lightbox-nav { position:absolute; z-index:2; color:white; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.25); cursor:pointer; width:42px; height:42px; border-radius:50%; font-size:22px; }
.close { right:-12px; top:-12px; }.lightbox-nav { top:50%; transform:translateY(-50%); }.lightbox-prev { left:17px; }.lightbox-next { right:17px; }
.video-lightbox { width:min(400px,88vw); padding:0; background:#000; border:0; overflow:visible; }
.video-lightbox::backdrop { background:rgba(12,16,14,.88); backdrop-filter:blur(8px); }
.video-lightbox video { width:100%; max-height:86vh; display:block; }
.calendar-modal { position:fixed; left:50%; right:auto; top:auto; bottom:clamp(0px,3vw,22px); margin:0; transform:translateX(-50%); width:min(440px,94vw); max-height:min(560px,85svh); overflow-y:auto; border:0; border-radius:22px; padding:clamp(24px,6vw,36px) clamp(20px,6vw,32px); background:var(--paper); color:var(--ink); animation:sheet-up .4s cubic-bezier(.2,.8,.2,1) both; }
.calendar-modal::backdrop { background:rgba(12,16,14,.6); backdrop-filter:blur(6px); }
.calendar-modal h3 { font:400 clamp(24px,6.5vw,34px)/1.05 "Bricolage Grotesque",sans-serif; margin:10px 0 14px; }
.calendar-modal > p:not(.eyebrow) { color:#66706b; font-size:clamp(13px,3.4vw,14px); line-height:1.7; margin:0 0 24px; }
.calendar-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calendar-options .cal-btn:last-child { grid-column:1/-1; }
.cal-btn { display:block; text-align:center; border:1px solid var(--line); padding:14px 10px; text-decoration:none; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; font-size:clamp(9px,2.6vw,9.5px); font-weight:700; transition:.2s; }
.cal-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.calendar-modal .close { right:14px; top:14px; width:34px; height:34px; font-size:18px; color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.6); }
@keyframes sheet-up { from { opacity:0; transform:translateX(-50%) translateY(32px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@media (max-width:520px) { .calendar-modal { bottom:0; left:0; right:0; transform:none; width:100%; max-width:none; max-height:88svh; border-radius:22px 22px 0 0; padding:28px 20px 24px; } @keyframes sheet-up { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } } }
@media (max-width:360px) { .calendar-options { grid-template-columns:1fr; } .calendar-modal { padding:24px 18px 22px; } }
.site-footer { background:var(--paper); padding:26px 5.5vw; text-align:center; }
.site-footer p { margin:0; font-size:11px; letter-spacing:.04em; color:#8a908b; }
.rsvp-fab { position:fixed; right:24px; bottom:24px; z-index:40; width:124px; height:124px; border-radius:50%; background:#5c1416; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 16px 34px rgba(31,41,37,.4); transition:opacity .35s ease, transform .35s ease; }
.rsvp-fab:hover { transform:translateY(-3px); }
.rsvp-fab.is-hidden { opacity:0; transform:translateY(14px) scale(.92); pointer-events:none; }
.rsvp-fab-ring { position:absolute; inset:0; width:100%; height:100%; animation:rsvp-spin 13s linear infinite; }
.rsvp-fab-ring text { font-size:13.5px; letter-spacing:.04em; fill:#fff; text-transform:uppercase; font-family:"DM Sans",sans-serif; font-weight:700; }
.rsvp-fab-center { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.14em; }
.rsvp-fab-arrow { width:15px; height:15px; animation:rsvp-bounce 1.6s ease-in-out infinite; }
@keyframes rsvp-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes rsvp-bounce { 0%,50%,100% { transform:translateY(0); } 25% { transform:translateY(3px); } }
@media (max-width:720px) { .rsvp-fab { width:98px; height:98px; right:16px; bottom:16px; } .rsvp-fab-ring text { font-size:12px; } .rsvp-fab-center { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .rsvp-fab-ring,.rsvp-fab-arrow { animation:none; } }
@media (max-width:720px) { .nav { padding:24px 7vw; }.hero-copy { inset-inline:4vw; }.countdown { gap:14px; margin-top:38px; }.countdown b { font-size:28px; }.gallery-section { padding:84px 0 74px; }.gallery-intro { flex-direction:column; align-items:flex-start; margin:0 8vw 40px; gap:28px; }.video-frame { width:min(200px,54vw); align-self:center; }.gallery-wrap { padding:0 5vw; gap:9px; }.gallery-card { flex-basis:78vw; }.details,.rsvp { padding:80px 8vw; }.details-heading { display:block; }.details-heading h2 { margin-top:23px; }.event-grid { grid-template-columns:1fr; margin-top:45px; }.rsvp { grid-template-columns:1fr; gap:48px; } form { gap:24px; } }