:root{
  --ink:#171b1c;--paper:#f4efe6;--sand:#d7c2a5;--sea:#547078;--white:#fbf8f1;
  --line:rgba(23,27,28,.2);--display:"Italiana",Georgia,serif;--sans:"Manrope",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
body:after{content:"";position:fixed;z-index:1000;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:4px}
.skip-link{position:fixed;z-index:1001;top:8px;left:8px;padding:12px 18px;background:var(--white);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.chapter{position:relative;min-height:100vh;overflow:hidden}
.chapter--dark,.chapter--ink{color:var(--white);background:var(--ink)}
.overline{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.chapter-no{position:absolute;top:92px;right:4vw;font:clamp(80px,12vw,190px)/1 var(--display);opacity:.08}
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .reveal.visible{opacity:1;transform:none}
em{font-weight:400;color:var(--sea)}

.nav{position:fixed;z-index:100;left:0;right:0;top:0;height:72px;padding:0 3vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--white);border-bottom:1px solid rgba(255,255,255,.22);transition:background .4s,color .4s,border-color .4s,transform .4s}
.nav.scrolled{background:rgba(244,239,230,.9);color:var(--ink);border-color:var(--line);backdrop-filter:blur(18px)}
.nav__monogram{font:22px var(--display);letter-spacing:.06em}.nav__monogram span{font:10px var(--sans);margin:0 4px;color:var(--sand)}
.nav nav{display:flex;gap:34px}.nav nav a{min-height:44px;display:flex;align-items:center;font-size:9px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;position:relative}
.nav nav a:after{content:"";position:absolute;left:0;right:.18em;bottom:7px;border-bottom:1px solid currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav nav a:hover:after,.nav nav a[aria-current]:after{transform:scaleX(1)}

.hero{min-height:100svh;display:grid;place-items:center;text-align:center}
.hero__picture,.hero__picture img,.hero__shade,.hero__opening{position:absolute;inset:0}
.hero__picture img{animation:heroZoom 12s cubic-bezier(.15,.65,.2,1) both}
.hero__shade{z-index:1;background:linear-gradient(180deg,rgba(10,16,17,.42),rgba(10,16,17,.1) 43%,rgba(10,16,17,.64)),linear-gradient(90deg,rgba(10,16,17,.2),transparent 38%,transparent 62%,rgba(10,16,17,.2))}
.hero__opening{z-index:5;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}.hero__opening i{background:var(--paper);animation:openLeft 2.1s .15s cubic-bezier(.75,0,.18,1) forwards}.hero__opening i:last-child{animation-name:openRight}
.hero__eyebrow{position:absolute;z-index:2;top:14vh;margin:0;font-size:9px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;animation:fadeUp 1s 1.5s both}
.hero__title{position:relative;z-index:2;display:flex;align-items:center;gap:2.3vw;font:clamp(86px,15vw,225px)/.72 var(--display);letter-spacing:-.06em;animation:fadeUp 1.2s 1.25s both}
.hero__title i{font:italic clamp(22px,3vw,44px) var(--display);letter-spacing:0;color:var(--sand)}
.hero__footer{position:absolute;z-index:2;bottom:30px;left:3vw;right:3vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;animation:fadeUp 1s 1.8s both}
.hero__footer p:first-child{text-align:left}.hero__footer p:last-child{text-align:right}.hero__footer a{justify-self:center;min-height:44px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.5)}.hero__footer a span{animation:arrow 1.7s infinite ease-in-out}
@keyframes openLeft{to{transform:translateX(-101%)}}@keyframes openRight{to{transform:translateX(101%)}}@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}@keyframes arrow{50%{transform:translateY(5px)}}

.letter{min-height:125vh;padding:14vh 7vw 10vh;display:grid;grid-template-columns:52% 42%;gap:6%;align-items:center}
.vertical-note{position:absolute;left:2vw;bottom:8vh;writing-mode:vertical-rl;font-size:8px;letter-spacing:.28em}
.letter__copy{padding-left:4vw;max-width:760px}.letter__copy h1{font:clamp(55px,6.8vw,106px)/.98 var(--display);font-weight:400;letter-spacing:-.035em;margin:4vh 0}.letter__copy h1 em{display:inline-block}
.letter__copy>p:not(.overline):not(.signature){max-width:540px;font-size:15px;line-height:1.8}
.letter__lead{font:clamp(20px,2vw,29px)/1.55 var(--display)!important}
.signature{margin:6vh 0 0;font:44px var(--display)}.signature span{font-size:.55em;color:var(--sea);margin:0 8px}
.letter__photo{height:82vh;margin:0;position:relative;overflow:hidden}.letter__photo picture{display:block;height:108%;transform:translateY(var(--parallax-y,0))}.letter__photo figcaption{position:absolute;bottom:18px;right:18px;padding:8px 10px;background:rgba(244,239,230,.82);font-size:8px;letter-spacing:.16em;text-transform:uppercase}

.date-scene{padding:16vh 8vw 10vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:end;background:var(--sand)}
.date-scene__intro h2{position:relative;margin:4vh 0 2vh;height:clamp(255px,31vw,500px);font-weight:400}.date-scene__intro h2 span{position:absolute;left:-1vw;top:0;font:clamp(230px,33vw,520px)/.76 var(--display);letter-spacing:-.09em}.date-scene__intro h2 em{position:absolute;z-index:1;left:33%;top:44%;font:italic clamp(50px,7vw,110px)/1 var(--display);color:var(--white)}.date-scene__intro h2 b{position:absolute;right:3%;top:13%;font:500 10px var(--sans);letter-spacing:.28em;writing-mode:vertical-rl}
.date-scene__intro>p:last-child{max-width:440px;font:20px/1.55 var(--display)}
.date-scene__details{justify-self:end;width:min(500px,100%);border-top:1px solid var(--ink)}.date-scene__details article{display:grid;grid-template-columns:130px 1fr;align-items:center;padding:25px 0;border-bottom:1px solid var(--ink)}.date-scene__details time{font:40px var(--display)}.date-scene__details p{font-size:11px;letter-spacing:.12em;text-transform:uppercase}.text-link{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.countdown{grid-column:1/-1;margin-top:9vh;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}.countdown div{padding:3vh 2vw;border-right:1px solid var(--ink);display:flex;align-items:baseline;gap:12px}.countdown div:last-child{border:0}.countdown strong{font:clamp(40px,6vw,90px) var(--display);font-weight:400}.countdown span{font-size:8px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.countdown .wedding-day{grid-column:1/-1;border:0;justify-content:center}.countdown .wedding-day strong{font-size:clamp(64px,10vw,150px)}

.interlude{min-height:120vh;display:grid;grid-template-columns:48% 52%}
.interlude__media{margin:0;height:120vh;overflow:hidden}.interlude__media img{height:108%;transform:translateY(var(--parallax-y,0))}
.interlude__copy{padding:15vh 7vw;display:flex;flex-direction:column;justify-content:center}.interlude__quote{font:clamp(50px,6vw,92px)/1.02 var(--display);margin:5vh 0 9vh}.interlude__quote em{color:var(--sand)}
.interlude ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.3)}.interlude li{min-height:72px;display:grid;grid-template-columns:140px 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.3)}.interlude time{font:19px var(--display)}.interlude li span{font-size:9px;letter-spacing:.18em;text-transform:uppercase}

.place{padding:15vh 6vw 10vh;display:grid;grid-template-columns:45% 48%;grid-template-rows:auto 1fr;gap:6vh 7%}
.place__heading{grid-column:1/-1}.place__heading h2{font:clamp(70px,10vw,155px)/.88 var(--display);font-weight:400;letter-spacing:-.04em;margin:4vh 0 0}.place__heading h2 em{margin-left:15vw}
.place__photo{margin:0;height:78vh;overflow:hidden}.place__photo img{transition:transform 1.2s}.place__photo:hover img{transform:scale(1.025)}
.place__info{align-self:center;max-width:560px}.place__info>div:first-child{display:grid;grid-template-columns:1fr 1fr;padding-bottom:4vh;border-bottom:1px solid var(--line)}.place__name{margin:0;font:clamp(32px,4vw,58px)/1 var(--display)}address{font-style:normal;font-size:13px;line-height:1.8}
.place__info>p{font:19px/1.7 var(--display);margin:5vh 0}.place__info .micro{font:500 9px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.button{min-height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ink);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .3s,color .3s}.button:hover{background:var(--ink);color:var(--white)}
.map{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.map summary{min-height:58px;display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.map summary::-webkit-details-marker{display:none}.map summary span{font-size:19px;transition:transform .3s}.map[open] summary span{transform:rotate(45deg)}.map__frame{height:340px;margin-bottom:18px;background:#ddd}.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.9) opacity(.78)}

.rsvp{min-height:115vh;padding:12vh 7vw;display:grid;grid-template-columns:40% 52%;gap:8%;align-items:center}
.rsvp__portrait{height:87vh;overflow:hidden}.rsvp__copy{max-width:760px}.rsvp__copy h2{font:clamp(72px,9vw,140px)/.85 var(--display);font-weight:400;margin:4vh 0 6vh}.rsvp__copy h2 em{color:var(--sand)}
.rsvp__copy>p:not(.overline):not(.travel){max-width:600px;font:20px/1.6 var(--display)}.rsvp__copy strong{font-weight:400;color:var(--sand)}
.contacts{display:grid;grid-template-columns:1fr 1fr;margin-top:6vh;border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35)}.contacts article{padding:3vh 2vw 3vh 0}.contacts article+article{padding-left:2vw;border-left:1px solid rgba(255,255,255,.35)}.contacts h3{font:35px var(--display);font-weight:400;margin:0 0 8px}.contacts .phone{font-size:13px;letter-spacing:.12em}.contacts article div{display:flex;gap:20px;margin-top:3vh}.contacts article div a{min-height:44px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.5);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.travel{margin:4vh 0 0;max-width:600px;font-size:12px;line-height:1.7}.travel span{display:block;margin-bottom:6px;color:var(--sand);font-size:9px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}

.playlist{min-height:85vh;padding:14vh 8vw;display:grid;align-items:center;background:var(--sea);color:var(--white)}
.playlist__copy{position:relative;z-index:2;max-width:720px}.playlist__copy h2{font:clamp(72px,9vw,140px)/.9 var(--display);font-weight:400;margin:4vh 0}.playlist__copy h2 em{color:var(--sand)}.playlist__copy>p:not(.overline){max-width:540px;font:19px/1.65 var(--display)}
.playlist__actions{display:flex;gap:16px;margin-top:5vh}.playlist__actions a{min-height:50px;padding:0 20px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.55);font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:.3s}.playlist__actions a:hover{background:var(--white);color:var(--sea)}
.playlist__word{position:absolute;right:-2vw;bottom:-5vh;font:clamp(140px,25vw,380px)/.75 var(--display);opacity:.08;letter-spacing:-.08em}

.finale{min-height:100svh;display:grid;place-items:center;text-align:center}.finale__media,.finale__shade{position:absolute;inset:0}.finale__shade{background:rgba(8,14,15,.48)}.finale__copy{position:relative;z-index:2}.finale__copy>p{font-size:9px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}.finale__copy>div{margin:5vh 0;font:clamp(90px,14vw,220px)/.8 var(--display);letter-spacing:-.05em}.finale__copy>div span{font-size:.28em;color:var(--sand)}.finale__copy time{font-size:11px;letter-spacing:.35em}

@media(max-width:900px){
  .nav{grid-template-columns:auto 1fr auto}.nav nav{justify-content:center;gap:18px}
  .letter{grid-template-columns:1fr 1fr;padding-inline:5vw}.letter__copy{padding-left:0}
  .date-scene{padding-inline:6vw}.date-scene__details article{grid-template-columns:100px 1fr}
  .place{grid-template-columns:47% 47%;gap-left:6%}.place__info>div:first-child{grid-template-columns:1fr}
  .rsvp{padding-inline:5vw;grid-template-columns:42% 52%;gap:6%}
}

@media(max-width:700px){
  body:after{opacity:.09}.chapter-no{top:82px;font-size:95px}
  .nav{height:62px;padding:0 16px;grid-template-columns:auto 1fr}.nav nav{display:none}.nav__monogram{font-size:19px}
  .hero__picture img{object-position:center 42%}.hero__eyebrow{top:16vh;font-size:8px}.hero__title{flex-direction:column;gap:4px;font-size:clamp(76px,25vw,105px);line-height:.72}.hero__title i{font-size:22px;margin:7px 0}
  .hero__footer{left:18px;right:18px;bottom:24px;grid-template-columns:1fr}.hero__footer p{display:none}.hero__footer a{font-size:9px}
  .letter{min-height:0;padding:12vh 22px 0;display:flex;flex-direction:column}.vertical-note{display:none}.letter__copy h1{font-size:clamp(48px,14vw,60px);margin:30px 0}.letter__copy>p:not(.overline):not(.signature){font-size:14px}.letter__lead{font-size:21px!important}.signature{font-size:37px;margin:35px 0 50px}.letter__photo{width:calc(100% + 44px);height:74vh}.letter__photo figcaption{left:12px;right:auto;font-size:7px}
  .date-scene{padding:12vh 22px 7vh;display:block}.date-scene__intro h2{height:230px;margin:36px 0 10px}.date-scene__intro h2 span{font-size:220px}.date-scene__intro h2 em{font-size:50px;left:30%;top:46%}.date-scene__intro h2 b{right:3%;top:7%}.date-scene__intro>p:last-child{font-size:18px}.date-scene__details{margin-top:55px}.date-scene__details article{grid-template-columns:105px 1fr;padding:18px 0}.date-scene__details time{font-size:34px}.date-scene__details p{font-size:9px}
  .countdown{margin-top:55px}.countdown div{padding:22px 4px;display:flex;flex-direction:column;gap:4px;text-align:center}.countdown strong{font-size:clamp(31px,10vw,42px)}.countdown span{font-size:7px;letter-spacing:.07em}
  .interlude{min-height:0;display:block}.interlude__media{height:72vh}.interlude__copy{padding:9vh 22px 10vh}.interlude__quote{font-size:clamp(47px,13vw,58px);margin:35px 0 55px}.interlude li{grid-template-columns:112px 1fr}.interlude time{font-size:17px}.interlude li span{font-size:8px}
  .place{padding:11vh 22px 9vh;display:flex;flex-direction:column;gap:42px}.place__heading h2{font-size:clamp(65px,19vw,82px);margin-top:30px}.place__heading h2 em{margin-left:12vw}.place__photo{width:calc(100% + 44px);margin-left:-22px;height:67vh;order:2}.place__info{order:3}.place__info>div:first-child{grid-template-columns:1fr 1fr;gap:15px}.place__name{font-size:30px}address{font-size:12px}.place__info>p{font-size:18px;margin:35px 0}.map__frame{height:300px}
  .rsvp{min-height:0;padding:0;display:flex;flex-direction:column}.rsvp__portrait{width:100%;height:70vh}.rsvp__copy{padding:9vh 22px 10vh}.rsvp__copy h2{font-size:clamp(72px,21vw,90px);margin:30px 0 45px}.rsvp__copy>p:not(.overline):not(.travel){font-size:18px}.contacts{grid-template-columns:1fr;margin-top:45px}.contacts article{padding:24px 0}.contacts article+article{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.35)}.contacts h3{font-size:32px}.contacts article div{margin-top:14px}.travel{margin-top:35px}
  .playlist{min-height:80vh;padding:11vh 22px}.playlist__copy h2{font-size:clamp(64px,19vw,82px);margin:30px 0}.playlist__copy>p:not(.overline){font-size:18px}.playlist__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.playlist__actions a{padding:0 10px;justify-content:center;font-size:8px}.playlist__word{font-size:48vw;bottom:0}
  .finale__media img{object-position:center}.finale__copy>div{font-size:clamp(72px,23vw,100px);display:flex;flex-direction:column;gap:7px}.finale__copy>div span{font-size:.3em}.finale__copy time{font-size:9px}
}

@media(max-width:350px){
  .letter__copy h1{font-size:45px}.date-scene__intro h2 span{font-size:195px}.date-scene__intro h2 em{font-size:45px}.place__info>div:first-child{grid-template-columns:1fr}.playlist__actions{grid-template-columns:1fr}
}

@media(max-height:700px) and (max-width:700px){
  .hero__eyebrow{top:12vh}.hero__title{font-size:70px}.hero__footer{bottom:14px}.rsvp__portrait{height:85vh}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__opening{display:none}.js .reveal{opacity:1;transform:none}.letter__photo picture,.interlude__media img{transform:none!important}
}