/* Forever Framed: an unfolding atlas of photographs. */
.ff-welcome-pending,.ff-welcome-pending body,.ff-welcome-opening,.ff-welcome-opening body{overflow:hidden!important}
.ff-welcome-pending body>:not(#ffWelcome):not(script){visibility:hidden}
.ff-welcome[hidden]{display:none!important}
.ff-welcome{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;isolation:isolate;perspective:1400px;color:#344332;background:#ece9df;overflow:hidden}
.ff-welcome:before,.ff-welcome:after{content:'';position:absolute;inset:0 50% 0 0;z-index:-2;background:linear-gradient(95deg,#e5e0d3,#f2efe5 90%,#dcd6c7);box-shadow:inset -18px 0 55px #b7ab8d24;transform-origin:left center;transition:transform 1.45s cubic-bezier(.76,0,.24,1),box-shadow 1.1s}
.ff-welcome:after{inset:0 0 0 50%;background:linear-gradient(85deg,#e9e4d8,#f1eee4 85%,#e2ddcf);box-shadow:inset 18px 0 55px #b7ab8d24;transform-origin:right center}
.ff-welcome-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.055;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23344332' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");transition:opacity .4s}
.ff-welcome-top,.ff-welcome-bottom{position:absolute;left:35px;right:35px;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:3;font:9px/1.8 'DM Sans',sans-serif;letter-spacing:2.3px;color:#6a735e;transition:opacity .35s}
.ff-welcome-top{top:26px}.ff-welcome-bottom{bottom:26px}
.ff-welcome-bottom span:first-child{font:italic 18px 'Playfair Display',serif;letter-spacing:0}
.ff-map-art{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .45s,transform 1.25s}
.ff-map-art svg{width:100%;height:100%;display:block}
.ff-map-outline{fill:none;stroke:#8e927a;stroke-width:.7;opacity:.23}
.ff-map-contour{fill:none;stroke:#8e927a;stroke-width:.65;opacity:.15}
.ff-map-route{fill:none;stroke:#9b895a;stroke-width:1.2;stroke-dasharray:1400;stroke-dashoffset:1400;opacity:.48;animation:ffMapTrace 3.8s .15s ease forwards}
.ff-map-route.secondary{stroke:#657d60;stroke-width:.8;animation-delay:.65s}
.ff-map-steps{fill:#66765a;opacity:0;animation:ffMapStep 8s var(--step,0s) infinite}
.ff-map-label{font:8px 'DM Sans',sans-serif;letter-spacing:3px;fill:#7a806b;opacity:.7}
.ff-map-compass{fill:none;stroke:#8d8e72;stroke-width:.8;opacity:.42;transform-origin:835px 180px;animation:ffMapCompass 24s linear infinite}
.ff-map-photos{position:absolute;inset:0;pointer-events:none;z-index:0;transition:opacity .5s}
.ff-map-photo{position:absolute;margin:0;width:clamp(105px,14vw,180px);padding:7px 7px 23px;background:#f8f6ef;box-shadow:0 5px 22px #51472b18;border:1px solid #c8c5b34d;transform:rotate(var(--tilt));animation:ffMapFloat 8s var(--delay,0s) ease-in-out infinite;transition:transform 1.05s cubic-bezier(.3,.7,.2,1),opacity .55s}
.ff-map-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;opacity:.9;filter:saturate(.85);animation:ffMapDevelop 1.8s ease both}
.ff-map-photo figcaption{position:absolute;bottom:6px;left:8px;right:8px;font:7px/1.2 'DM Sans',sans-serif;letter-spacing:1.5px;text-align:center;color:#7b826f}
.ff-map-photo.one{left:5%;top:17%;--tilt:-9deg;--delay:-1s;--escape-x:-35vw;--escape-y:-20vh}
.ff-map-photo.two{right:6%;top:14%;--tilt:8deg;--delay:-3s;--escape-x:35vw;--escape-y:-25vh}
.ff-map-photo.two img,.ff-map-photo.three img{aspect-ratio:4/3}
.ff-map-photo.three{left:8%;bottom:15%;width:clamp(120px,17vw,210px);--tilt:6deg;--delay:-5s;--escape-x:-38vw;--escape-y:28vh}
.ff-map-photo.four{right:5%;bottom:13%;--tilt:-7deg;--delay:-2s;--escape-x:38vw;--escape-y:25vh}
.ff-welcome-center{position:relative;z-index:3;text-align:center;transition:opacity .45s,transform .95s cubic-bezier(.2,.7,.2,1),filter .8s}
.ff-map-kicker{font:9px/1.6 'DM Sans',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#7c846c;margin:0 0 12px}
.ff-welcome-enter{position:relative;display:flex;flex-direction:column;align-items:center;gap:29px;border:0;background:none;color:inherit;padding:26px 28px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ff-welcome-enter img{position:relative;z-index:1;display:block;width:min(440px,52vw);height:auto;max-height:36vh;object-fit:contain;filter:drop-shadow(0 2px 8px #f6f3e8);transition:transform .5s ease,filter .5s;animation:ffMapInk 1.2s .15s both}
.ff-map-seal{position:absolute;left:50%;top:40%;width:min(310px,39vw);aspect-ratio:1;border:1px solid #8a967e26;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.ff-map-seal:before,.ff-map-seal:after{content:'';position:absolute;inset:10px;border:1px dashed #8a967e33;border-radius:50%}
.ff-map-seal:after{inset:-13px;border-style:solid;border-color:#8a967e12}
.ff-welcome-enter:hover img{transform:scale(1.045);filter:drop-shadow(0 0 19px #a4b19280)}
.ff-welcome-center{z-index:6}
.ff-welcome-enter{text-decoration:none}
.ff-welcome-enter img{animation:none;opacity:1;filter:none}
.ff-welcome-enter:hover img{filter:none}
.ff-welcome-enter:focus-visible{outline:none}
.ff-welcome-enter:focus-visible .ff-welcome-invitation{outline:2px solid #6e805e;outline-offset:8px;border-radius:3px}
.ff-welcome-invitation{position:relative;z-index:1;display:flex;align-items:center;gap:15px;font:10px/1.6 'DM Sans',sans-serif;letter-spacing:2.4px;text-transform:uppercase;padding:10px 3px;border-bottom:1px solid #84917899}
.ff-welcome-invitation:before{content:'✦';font-size:16px;color:#a18b56;animation:ffMapGlint 3s ease-in-out infinite}
.ff-welcome-invitation b{font-size:20px;font-weight:400;letter-spacing:0}
.ff-map-hint{font:italic 16px/1.5 'Playfair Display',serif;color:#7b836b;margin:10px 0 0}
.ff-map-pulse{position:absolute;width:90px;height:90px;left:50%;top:42%;border:1px solid #8d9b77;border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.4)}
.ff-welcome-leaving{background:transparent;pointer-events:none}
.ff-welcome-leaving:before{transform:translateX(-108%) rotateY(-18deg) rotateZ(-4deg);box-shadow:none}
.ff-welcome-leaving:after{transform:translateX(108%) rotateY(18deg) rotateZ(4deg);box-shadow:none}
.ff-welcome-leaving .ff-welcome-center{opacity:0;transform:scale(1.16);filter:blur(3px);transition-delay:.15s}
.ff-welcome-leaving .ff-map-pulse{animation:ffMapPulse .9s ease-out both}
.ff-welcome-leaving .ff-map-photo{animation:none;transform:translate(var(--escape-x),var(--escape-y)) rotate(calc(var(--tilt) + 12deg)) scale(1.12);opacity:0}
.ff-welcome-leaving .ff-map-art{opacity:0;transform:scale(1.12)}
.ff-welcome-leaving .ff-welcome-top,.ff-welcome-leaving .ff-welcome-bottom,.ff-welcome-leaving .ff-welcome-grain{opacity:0}
.ff-home-arriving .hero>.reveal{animation:ffHomeArrive 1.2s .4s both;opacity:1}
.ff-home-arriving .hero>.hero-visual{animation-delay:.55s}
@keyframes ffMapTrace{to{stroke-dashoffset:0}}
@keyframes ffMapStep{0%,8%{opacity:0}18%,42%{opacity:.42}65%,100%{opacity:0}}
@keyframes ffMapCompass{to{transform:rotate(360deg)}}
@keyframes ffMapFloat{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-9px) rotate(calc(var(--tilt) + 2deg))}}
@keyframes ffMapDevelop{from{opacity:.15;filter:saturate(.35)}to{opacity:.9;filter:saturate(.85)}}
@keyframes ffMapInk{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes ffMapGlint{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ffMapPulse{0%{opacity:.6;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
@keyframes ffHomeArrive{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:600px){
.ff-welcome-top,.ff-welcome-bottom{left:20px;right:20px;font-size:7px;letter-spacing:1.4px}
.ff-welcome-top span:last-child{display:none}
.ff-welcome-bottom{flex-direction:column;gap:8px;bottom:24px}
.ff-welcome-bottom span:first-child{font-size:16px}
.ff-map-photo{width:96px;padding:5px 5px 20px;opacity:.68}
.ff-map-photo figcaption{font-size:6px;letter-spacing:.8px}
.ff-map-photo.one{left:-18px;top:13%}
.ff-map-photo.two{right:-22px;top:15%;width:110px}
.ff-map-photo.three{left:-20px;bottom:15%;width:115px}
.ff-map-photo.four{right:-17px;bottom:13%;width:96px}
.ff-map-kicker{font-size:8px;letter-spacing:2px;max-width:80vw;margin:0 auto 14px}
.ff-welcome-enter{padding:25px 12px;gap:30px}
.ff-welcome-enter img{width:76vw;max-height:33vh}
.ff-map-seal{width:62vw}
.ff-welcome-invitation{font-size:9px;letter-spacing:1.8px;gap:12px}
.ff-map-hint{font-size:15px}
}
@media(max-height:620px){
.ff-map-photo.two,.ff-map-photo.three{display:none}
.ff-welcome-enter{gap:15px;padding:14px}
.ff-welcome-enter img{max-height:31vh;width:min(360px,65vw)}
.ff-map-kicker{margin-bottom:4px}.ff-map-hint{margin-top:4px}
.ff-welcome-bottom{bottom:15px}.ff-welcome-top{top:15px}
}
@media(prefers-reduced-motion:reduce){
.ff-welcome *,.ff-welcome:before,.ff-welcome:after{animation:none!important;transition:none!important}
.ff-map-route{stroke-dashoffset:0}.ff-map-steps{opacity:.25}
.ff-home-arriving .hero>.reveal{animation:none!important}
}
