@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('assets/body-fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url('assets/body-fonts/manrope-500.ttf') format('truetype')}
*{box-sizing:border-box}
html{font-synthesis:none}
body{margin:0;background:#d6cdca;color:#292326;font-family:Manrope,sans-serif;--ink:#292326;--accent:#963d2e;--gutter:24px;--page-pad:clamp(24px,5.55vw,80px);--centre-adjust:calc(125px - max(90px,10.5dvh));--id-width:444.402px;--second-ink:#0645b9}
button,input{font:inherit}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.frame{width:min(960px,calc(100% - var(--page-pad)*2));margin-inline:auto}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:760px;height:100dvh}
.scene{position:absolute;inset:0;z-index:-1;overflow:visible;pointer-events:none;translate:var(--centre-adjust) 0}
.scene picture{display:contents}
.scene img{display:block;position:absolute;width:max(1800px,210dvh);max-width:none;height:auto;left:calc(50% + 230px - max(900px,105dvh));top:50%;transform:translateY(calc(-46.7% - 10px));animation:levitate 4.5s cubic-bezier(.42,0,.58,1) infinite;will-change:transform}
.scene .backdrop-extension{left:calc(50% + 230px - max(2700px,315dvh));scale:-1 1;margin-left:2px}
.scene .backdrop-right{left:calc(50% + 230px + max(900px,105dvh));scale:-1 1;margin-left:-2px}
.layout{height:100%;min-height:inherit;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center;translate:var(--centre-adjust) 0}
.copy{grid-column:1/7;width:min(100%,var(--id-width));padding-block:48px;translate:0 calc(-0.00645 * max(1800px,210dvh) - 10px)}
.identity{margin:0 0 28px;width:100%;font-weight:400;line-height:0}
.identity svg{display:block;width:100%;height:auto;overflow:visible}
.invitation{container-type:inline-size}
.description{font-weight:500;font-size:max(16px,5.3cqi);line-height:1.3;white-space:nowrap;margin:0 0 6px;letter-spacing:-.02em;text-align:center}
.news{text-wrap:balance;font-size:16px;line-height:1.5;margin:0 0 24px;text-align:center}
form{position:relative}
.fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
input{min-width:0;width:100%;padding:17px 16px;border:0;border-radius:18px;color:var(--ink);background:#e9e2de;font-size:16px}
input::placeholder{color:#514747}
input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fields button{display:block;border:0;border-radius:18px;background:var(--accent);color:#fff8ef;padding:17px 22px;font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer}
.fields button:hover{filter:brightness(.9)}
.fields button:disabled{cursor:wait;opacity:.75}
#form-message{font:12px/1.5 Manrope,sans-serif;text-align:center;margin:8px 0 0;overflow-wrap:anywhere}
#form-message:empty{display:none}
#signup-fallback{display:block;font-size:12px;text-align:center;text-decoration:underline;margin-top:8px;padding:4px}
#signup-fallback[hidden]{display:none}
.sr-only,.bot-trap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.social-links{display:flex;justify-content:center;gap:18px;margin-top:28px;font-size:16px}
.social-links a{display:inline-flex;padding:4px;text-decoration:none;color:var(--accent)}
.social-links svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@keyframes levitate{0%,100%{transform:translateY(calc(-46.7% - 10px + 6px))}50%{transform:translateY(calc(-46.7% - 10px - 6px))}}
@media(min-width:901px) and (max-width:1199px){
 body{--centre-adjust:0px}.hero{min-height:740px}.copy{padding-block:40px;translate:0 calc(-0.00645 * max(1450px,210dvh) - 10px)}.identity{margin-bottom:32px}
 .scene img{width:max(1450px,210dvh);left:calc(73% - max(725px,105dvh))}
 .scene .backdrop-extension{left:calc(73% - max(2175px,315dvh))}.scene .backdrop-right{left:calc(73% + max(725px,105dvh))}
}
@media(max-width:900px){
 body{--page-pad:24px;--gutter:16px;--centre-adjust:0px;--id-width:306.849px}
 .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;
  /* Page colour follows the photo's own backdrop so the logo and the photo read as one image: slightly darker above
     (the photo darkens towards its top), the photo's sampled top-edge colour where the frame starts, its bottom-edge
     colour where it ends, held to the bottom. --lift is the logo block's height, i.e. where the frame starts. */
  --lift:calc(min(100vw - 64px, 306.849px) * .49073 + 40px);
  background:linear-gradient(to bottom,#ab9f9e 0,#b5a8a8 var(--lift),#c7bbb7 calc(var(--lift) + 100vw),#cabfbb 100%)}
 body{background:#cabfbb}
 .layout,.copy{display:contents}.copy{width:auto}
 .identity{order:0;width:calc(100% - 64px);max-width:var(--id-width);margin:40px auto 0}
 .scene{order:1;position:relative;inset:auto;z-index:0;aspect-ratio:1;width:100%;margin-top:0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 3%,rgba(0,0,0,.6) 6.5%,#000 11%,#000 86%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.25) 96.5%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 3%,rgba(0,0,0,.6) 6.5%,#000 11%,#000 86%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.25) 96.5%,transparent 100%)}
 .scene img{width:120%;left:-10%;top:50%;transform:translateY(-50%);animation-name:levitate-phone}
 .scene .backdrop-extension,.scene .backdrop-right{display:none}
 .invitation{order:2;width:calc(100% - 64px);max-width:var(--id-width);margin:0 auto 20px}
 .news{font-size:14px;line-height:1.45}
 .fields button{padding:17px 18px}
 .social-links{margin-bottom:24px}
}
@media(max-width:399px){.description{white-space:normal}}
@media(max-width:359px){.fields{grid-template-columns:1fr}}
@keyframes levitate-phone{0%,100%{transform:translateY(calc(-50% + 6px))}50%{transform:translateY(calc(-50% - 6px))}}

/* Chosen grain, halftone and second-ink interactions. */
.riso-defs{position:absolute;width:0;height:0;overflow:hidden}
body[data-riso]:not([data-riso=off])::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .15 2.2 0 0 0 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-halftone=on] .scene::after{content:"";position:absolute;inset:0;translate:calc(-1 * var(--centre-adjust)) 0;pointer-events:none;opacity:.3;mix-blend-mode:multiply;background:linear-gradient(90deg,#555,#fff 15%,#fff 85%,#555);filter:url(#riso-halftone)}
/* Phones and tablets: the halftone runs the full height of the page, not just the photo frame. It sits above the
   photo (multiply) but below the logo and text, so the dots never cross the type. */
@media(max-width:900px){
 body[data-halftone=on] .scene::after{content:none}
 body[data-halftone=on] .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.3;mix-blend-mode:multiply;background:linear-gradient(90deg,#555,#fff 20%,#fff 80%,#555);filter:url(#riso-halftone)}
 .identity,.invitation{position:relative;z-index:2}
}
@keyframes riso-flash-box{0%{box-shadow:-4px 3px 0 var(--second-ink)}35%{box-shadow:4px -2px 0 var(--second-ink)}65%{box-shadow:-2px 3px 0 var(--second-ink)}100%{box-shadow:3px 3px 0 var(--second-ink)}}
@keyframes riso-flash-icon{0%{filter:drop-shadow(-3px 2px 0 var(--second-ink))}35%{filter:drop-shadow(3px -1px 0 var(--second-ink))}65%{filter:drop-shadow(-1px 2px 0 var(--second-ink))}100%{filter:drop-shadow(1.5px 1px 0 var(--second-ink))}}

.fields button:not(:disabled):hover,.fields button:not(:disabled):focus-visible{animation:riso-flash-box .32s steps(1,end) infinite}
.social-links a:hover svg,.social-links a:focus-visible svg{animation:riso-flash-icon .32s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){
.scene img{animation:none;will-change:auto}
.fields button:not(:disabled):hover,.fields button:not(:disabled):focus-visible{animation:none;box-shadow:3px 3px 0 var(--second-ink)}
.social-links a:hover svg,.social-links a:focus-visible svg{animation:none;filter:drop-shadow(1.5px 1px 0 var(--second-ink))}
}