*{box-sizing:border-box}
:root{--cream:#F3EBDD;--brown:#302621;--muted:#786B64}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--brown)}
body{font-family:"DM Sans",sans-serif}
.page{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column}

header,footer{position:relative;z-index:3;width:min(1280px,calc(100% - 44px));margin-inline:auto}
header{height:112px;display:flex;align-items:center;justify-content:space-between}
img{border:0}
.mark,.wordmark{display:block;height:auto;object-fit:contain;background:var(--cream);image-rendering:auto}
.mark{width:70px;aspect-ratio:232/179}
header a{color:var(--brown);text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.24em}

main{position:relative;z-index:2;flex:1;width:min(980px,calc(100% - 48px));margin-inline:auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2vh 0 8vh}

.coming{margin:0 0 34px;font-size:15px;font-weight:500;letter-spacing:.42em}
.wordmark{width:74vw;max-width:560px;aspect-ratio:1181/363;margin:0}
.copy{margin:34px 0 0;color:var(--muted);font-size:16px;font-weight:300;line-height:1.8}

form{width:min(540px,100%);margin-top:46px}
.email-row{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid rgba(48,38,33,.78);padding-bottom:7px}
input{min-width:0;border:0;outline:0;background:transparent;color:var(--brown);font:inherit;font-size:15px;padding:13px 8px 13px 0}
input::placeholder{color:#948880}
button{border:0;background:var(--brown);color:var(--cream);font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.17em;padding:14px 24px;cursor:pointer}
small{display:block;margin-top:13px;color:var(--muted);font-size:11px;letter-spacing:.02em}

.flow{position:absolute;z-index:3;pointer-events:none;overflow:visible;width:calc(100vw + 560px);max-width:none;will-change:transform}
.flow path{fill:none;stroke:var(--brown);stroke-width:1.35;stroke-linecap:round;opacity:0;stroke-dasharray:2200;stroke-dashoffset:2200;transform-box:fill-box;transform-origin:center}
.flow path.is-drawing{opacity:.25;animation:drawAcross var(--draw-time,14s) ease-in-out forwards,lineSway var(--sway-time,16s) ease-in-out infinite alternate}
.flow .soft{stroke-width:.9}
.flow .soft.is-drawing{opacity:.08}
.flow-a{top:20px;left:-280px;animation:floatA 38s ease-in-out infinite alternate}
.flow-b{right:-280px;bottom:-145px;animation:floatB 44s ease-in-out infinite alternate}

@keyframes drawAcross{
  0%{stroke-dashoffset:2200}
  40%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-2200}
}

@keyframes lineSway{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(var(--sway-mid-x,-18px),var(--sway-mid-y,10px),0) scale(var(--sway-mid-scale,1.018))}
  100%{transform:translate3d(var(--sway-end-x,14px),var(--sway-end-y,-8px),0) scale(var(--sway-end-scale,1.006))}
}

@keyframes floatA{
  0%{transform:translate3d(-10px,0,0) rotate(-7deg) scale(1)}
  50%{transform:translate3d(34px,15px,0) rotate(-5.7deg) scale(1.018)}
  100%{transform:translate3d(66px,-8px,0) rotate(-6.6deg) scale(1.006)}
}
@keyframes floatB{
  0%{transform:translate3d(0,0,0) rotate(6deg) scale(1)}
  50%{transform:translate3d(-38px,-17px,0) rotate(7.2deg) scale(1.018)}
  100%{transform:translate3d(-72px,9px,0) rotate(5.5deg) scale(1.008)}
}

footer{padding:22px 0 27px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.15em}

@media(max-width:700px){
  header,footer{width:calc(100% - 28px)}
  header{height:88px}
  .mark{width:56px}
  main{width:calc(100% - 36px);padding:6vh 0 9vh}
  .coming{font-size:13px;letter-spacing:.34em;margin-bottom:28px}
  .wordmark{width:78vw;max-width:430px}
  .copy{margin-top:30px;font-size:15px;max-width:330px}
  .email-row{grid-template-columns:1fr;border-bottom:0;gap:10px}
  form{margin-top:42px}
  input{border-bottom:1px solid rgba(48,38,33,.78);padding:14px 0}
  button{width:100%;padding:16px 20px}
  .flow{width:calc(100vw + 640px)}
  .flow-a{left:-390px;top:70px}
  .flow-b{right:-390px;bottom:-70px}
  footer{flex-direction:column;align-items:center;gap:8px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .flow{animation:none!important}
  .flow path{animation:none!important;opacity:.25;stroke-dashoffset:0}
  .flow .soft{opacity:.08}
}