:root{
  --cream:#efe6d7;
  --paper:#f6f0e5;
  --ink:#5c4a3a;
  --ink-soft:#8a7460;
  --line:#cbb9a1;
  --line-soft:#dccbb4;
  --brown:#6f5844;
  --brown-deep:#4a3928;
  --blush:#c98b6d;
  --on-brown:#f6f0e5;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%,#f4ecdf,transparent 60%),
    var(--cream);
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 24px;text-align:center;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* soft framed border */
body::before{
  content:"";position:fixed;inset:18px;border:1px solid var(--line-soft);border-radius:22px;pointer-events:none;
}

.stage{max-width:600px;width:100%;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}

.logo-img{
  width:min(62vw,320px);height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply;
  opacity:0;transform:translateY(14px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards;
}

.badge{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-family:'Jost';font-weight:300;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .28s forwards;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--blush)}

h1{
  font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.02;
  font-size:clamp(3.2rem,12vw,6rem);color:var(--ink);margin-top:22px;letter-spacing:.01em;
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .4s forwards;
}
h1 em{font-style:italic;color:var(--brown)}

.tagline{
  font-family:'Jost';font-weight:300;letter-spacing:.26em;text-transform:uppercase;font-size:.84rem;color:var(--ink-soft);
  margin-top:18px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .52s forwards;
}

.rule{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--line);margin-top:30px;width:100%;max-width:320px;
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .6s forwards;}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line))}
.rule::after{background:linear-gradient(90deg,var(--line),transparent)}
.rule svg{width:18px;height:18px;color:var(--blush)}

.note{color:var(--ink-soft);font-weight:300;font-size:1.05rem;margin-top:26px;max-width:44ch;line-height:1.7;
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .68s forwards;}
.note b{color:var(--brown);font-weight:400}

/* subscribe */
.subscribe{margin-top:32px;width:100%;max-width:440px;
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .78s forwards;}
.sub-label{font-family:'Jost';font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:var(--ink-soft);margin-bottom:12px}
form{display:flex;gap:10px;flex-wrap:wrap}
input[type=email]{
  flex:1;min-width:200px;padding:15px 20px;border:1px solid var(--line);border-radius:100px;background:var(--paper);
  font-family:'Jost';font-weight:300;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
input[type=email]::placeholder{color:#9c8b78}
input[type=email]:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 4px rgba(111,88,68,.12)}
button{
  padding:15px 30px;border:none;border-radius:100px;cursor:pointer;
  background:var(--brown);color:var(--on-brown);font-family:'Jost';font-weight:400;font-size:1rem;letter-spacing:.03em;
  box-shadow:0 16px 30px -20px rgba(74,57,40,.5);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s;
}
button:hover{background:var(--brown-deep);transform:translateY(-2px)}
.fine{font-size:.78rem;color:var(--ink-soft);font-weight:300;margin-top:12px}
.ok{display:none;margin-top:8px;color:var(--brown);font-family:'Cormorant Garamond';font-style:italic;font-size:1.2rem}

.contact{margin-top:36px;display:flex;gap:14px 28px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .88s forwards;}
.contact a{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:300;font-size:.95rem;letter-spacing:.02em;transition:color .18s}
.contact a:hover{color:var(--brown)}
.contact svg{width:1.15em;height:1.15em;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--brown)}

.socials{display:flex;gap:12px;margin-top:26px;opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .96s forwards;}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--brown);transition:background .2s,color .2s,border-color .2s}
.socials a:hover{background:var(--brown);color:var(--on-brown);border-color:transparent}
.socials svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .logo-img,.badge,h1,.tagline,.rule,.note,.subscribe,.contact,.socials{opacity:1;transform:none;animation:none}
}
@media (max-width:520px){
  body::before{inset:12px}
  form{flex-direction:column}
  button{width:100%}
}