:root{
  --background:#f5f4ef; --foreground:#363e39; --primary:#6b2a2c; --primary-fg:#f5f4ef;
  --muted:#ebe9e2; --muted-fg:#76766c; --border:#aeab9e; --stone:#b2ae9c; --radius:2px;
}
@supports (color: oklch(50% 0 0)){
  :root{
    --background:oklch(96.6% .008 106); --foreground:oklch(31% .012 155); --primary:oklch(36% .09 22);
    --primary-fg:oklch(96.6% .008 106); --muted:oklch(93% .01 100); --muted-fg:oklch(50% .015 100);
    --border:oklch(72% .02 100); --stone:oklch(72% .03 100);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--background);color:var(--foreground);font-family:"EB Garamond",Georgia,serif;font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--primary);color:var(--primary-fg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .36 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-fg)}
.script{font-family:"Pinyon Script",cursive;font-weight:400;color:var(--primary);line-height:1.1}

/* hero */
main{position:relative;z-index:2}
.hero{text-align:center;padding:clamp(64px,11vh,130px) 24px 40px;max-width:820px;margin:0 auto}
.hero h1{white-space:nowrap;font-size:clamp(2.8rem,12.5vw,6.4rem);margin:clamp(18px,4vh,36px) 0 clamp(26px,5vh,56px)}
.hero h1 .amp{font-size:.62em;margin:0 .18em;opacity:.85}
.date-line{font-size:1.1rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.9}
.date-line span{display:inline-block}
.date-line .sep{margin:0 .5em;color:var(--stone)}
.lede{font-size:clamp(1.25rem,3.4vw,1.75rem);line-height:1.7;margin-top:clamp(28px,6vh,64px)}
.countdown{display:flex;justify-content:center;gap:clamp(18px,5vw,44px);margin-top:clamp(32px,6vh,60px)}
.countdown div{min-width:64px}
.countdown b{display:block;font-weight:400;font-size:clamp(1.9rem,6vw,2.6rem);color:var(--primary);font-variant-numeric:tabular-nums;line-height:1.1}
.countdown span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-fg)}

/* panorama */
.panorama{position:relative;margin:clamp(40px,8vh,80px) 0 0;overflow:hidden}
.panorama .frame{position:relative;width:100%;aspect-ratio:3/1;min-height:220px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%)}
.panorama img{position:absolute;inset:-6% 0 auto 0;width:100%;height:112%;object-fit:cover;object-position:center 40%;will-change:transform}
.panorama .shimmer{position:absolute;left:0;right:0;bottom:4%;height:24%;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.22) 38px 52px,transparent 52px 120px);
  mix-blend-mode:soft-light;animation:river 9s linear infinite;opacity:.7}
@keyframes river{to{background-position:240px 0}}
.panorama .caption{text-align:center;margin-top:14px}

/* rsvp */
.rsvp{max-width:700px;margin:0 auto;padding:clamp(64px,10vh,110px) 24px 40px}
.rsvp header{text-align:center;margin-bottom:clamp(36px,6vh,56px)}
.rsvp h2{font-family:"EB Garamond",Georgia,serif;font-weight:400;color:var(--primary);font-size:clamp(2.2rem,6vw,3rem);line-height:1.15}
.rsvp header p{font-size:1.2rem;margin-top:14px}
.choice{display:grid;gap:20px;margin-bottom:56px}
.choice button,.pill{appearance:none;-webkit-appearance:none;width:100%;text-align:left;font:inherit;font-size:1.25rem;line-height:1.35;color:var(--foreground);background:transparent;
  border:1px solid var(--border);border-radius:var(--radius);padding:22px 56px 22px 26px;cursor:pointer;transition:all .35s ease;position:relative;touch-action:manipulation}
.choice button[aria-pressed="true"]{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.choice button[aria-pressed="true"]::after{content:"✓";position:absolute;right:26px;top:50%;transform:translateY(-50%)}
.field{margin-bottom:40px}
.field label,.label{display:block;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;font-size:1.3rem;color:var(--foreground);background:transparent;border:0;border-bottom:1px solid var(--border);
  border-radius:0;padding:18px 0 14px;outline:none;transition:border-color .3s}
.field input::placeholder{color:var(--stone)}
.field input:focus,.field select:focus{border-bottom-color:var(--primary)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2376766c' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.field.invalid input{border-bottom-color:#a33}
.row{display:grid;grid-template-columns:1fr 2fr;gap:28px}
.group-title .label{color:var(--foreground)}
.group-title p{font-size:1.2rem;color:var(--muted-fg);margin-bottom:36px}
.collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s ease,opacity .5s ease}
.collapsible>div{overflow:hidden}
.collapsible.closed{grid-template-rows:0fr;opacity:0}
.pills{display:flex;gap:16px;margin-top:12px}
.pill{width:auto;flex:1;text-align:center;padding:16px}
.pill[aria-pressed="true"]{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
@media (hover:hover){.choice button:hover,.pill:hover{border-color:var(--primary)}}

/* photo upload */
.field label.photo{display:flex;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin-bottom:0}
.photo{border:1px dashed var(--border);border-radius:var(--radius);padding:28px;display:flex;gap:24px;align-items:center;transition:border-color .3s,background .3s;cursor:pointer;position:relative}
.photo:hover,.photo.drag{border-color:var(--primary);background:color-mix(in srgb,var(--muted) 60%,transparent)}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.photo .thumb{flex:none;width:92px;height:92px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;color:var(--primary);background:var(--background)}
.photo .thumb img{width:100%;height:100%;object-fit:cover}
.photo .ptitle{display:block;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--foreground)}
.photo .ptext{display:block;font-size:1.1rem;color:var(--muted-fg);margin-top:4px;line-height:1.45}
.photo .pbtn{display:inline-block;margin-top:10px;color:var(--primary);font-style:italic;border-bottom:1px solid currentColor}
.photo-remove{background:none;border:0;font:inherit;color:var(--muted-fg);text-decoration:underline;cursor:pointer;margin-top:10px;font-size:.95rem;padding:6px 0}

.submit{display:block;width:100%;margin-top:56px;font:inherit;font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--primary-fg);background:var(--primary);border:1px solid var(--primary);border-radius:var(--radius);padding:22px;cursor:pointer;transition:all .35s;touch-action:manipulation}
@media (hover:hover){.submit:hover{background:transparent;color:var(--primary)}}
.submit[disabled]{opacity:.6;cursor:wait}
.fineprint{text-align:center;color:var(--muted-fg);font-style:italic;margin-top:18px}
.error{color:#a33;text-align:center;margin-top:16px;min-height:1.4em}
.hp{position:absolute;left:-9999px}

.thanks{text-align:center;padding:40px 0 10px}
.thanks .script{font-size:clamp(3rem,10vw,4.4rem)}
.thanks .tphoto{width:140px;height:140px;border-radius:50%;object-fit:cover;margin:0 auto 18px;display:block;border:1px solid var(--border)}
.thanks p{font-size:1.3rem;margin-top:12px}
.thanks .mailnote{font-size:1.1rem;color:var(--muted-fg);font-style:italic}
.cal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.cal-links a{display:inline-block;color:var(--primary);text-decoration:none;border:1px solid var(--primary);padding:14px 22px;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;transition:all .3s;text-align:center}
@media (hover:hover){.cal-links a:hover{background:var(--primary);color:var(--primary-fg)}}
.thanks button.link{background:none;border:0;font:inherit;color:var(--muted-fg);text-decoration:underline;cursor:pointer;margin-top:22px;display:block;margin-inline:auto;padding:8px}
.preview-note{font-size:.9rem!important;color:var(--muted-fg);font-style:italic}

footer{text-align:center;padding:70px 24px calc(90px + env(safe-area-inset-bottom));position:relative;z-index:2}
footer .script{font-size:3rem}
footer .rule{width:56px;height:1px;background:var(--border);margin:18px auto}

.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* phones */
@media (max-width:640px){
  .panorama .frame{aspect-ratio:auto;height:260px}
  .panorama img{object-position:58% 50%}
  .date-line{font-size:.95rem;letter-spacing:.18em}
  .date-line .sep{display:none}
  .date-line span{display:block}
  .lede br{display:none}
  .lede span{display:block}
  .lede span + span{margin-top:12px}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr;gap:0}
  .rsvp{padding-left:20px;padding-right:20px}
  .choice{gap:14px;margin-bottom:44px}
  .choice button{font-size:1.15rem;padding:18px 50px 18px 20px}
  .choice button[aria-pressed="true"]::after{right:20px}
  .field{margin-bottom:30px}
  .field input,.field select{font-size:1.2rem;padding:14px 0 12px}
  .submit{margin-top:40px}
}
@media (max-width:480px){
  .photo{flex-direction:column;text-align:center;padding:24px 18px;gap:16px}
  .cal-links{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}