:root{
  --ink-0:#15111f; --ink-1:#231833; --plum:#3d1f3b; --rose:#5a2a3c;
  --paper:#f3e9e4; --accent:oklch(0.8 0.08 40);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink-0);color:var(--paper);font-family:'Jost',sans-serif}
a{color:var(--paper);text-decoration:none}
a:hover{color:var(--accent)}
.page{min-height:100vh;background:linear-gradient(180deg,var(--ink-0) 0%,var(--ink-1) 38%,var(--plum) 72%,var(--rose) 100%);overflow:hidden}
.wrap{max-width:1280px;margin:0 auto;padding-left:48px;padding-right:48px}

.nav{display:flex;justify-content:space-between;align-items:center;padding-top:32px;padding-bottom:32px}
.brand{display:flex;align-items:center;gap:16px}
.logo{width:48px;height:48px;border-radius:14px;flex-shrink:0;background:linear-gradient(155deg,var(--plum) 0%,var(--rose) 60%,oklch(0.55 0.1 30) 100%);box-shadow:inset 0 0 0 1px rgba(243,233,228,.18),0 8px 20px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo span{font-family:'Bodoni Moda',serif;font-size:84px;line-height:1;transform:translate(1px,24px)}
.wordmark{font-family:'Bodoni Moda',serif;font-size:28px;letter-spacing:.28em;text-transform:uppercase}
.pill{font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(243,233,228,.4);padding:12px 22px;border-radius:40px}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-top:72px;padding-bottom:120px}
.copy{display:flex;flex-direction:column;gap:30px}
h1{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(48px,7vw,100px);line-height:.98;letter-spacing:-.015em}
.lede{margin:0;font-size:21px;line-height:1.6;font-weight:300;max-width:560px;opacity:.88;text-wrap:pretty}

.join{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.form{display:flex;gap:8px;max-width:500px;background:rgba(243,233,228,.08);border:1px solid rgba(243,233,228,.25);border-radius:60px;padding:6px}
.form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--paper);font:inherit;font-size:17px;padding:14px 20px}
.form input::placeholder{color:var(--paper);opacity:.5}
.form button{background:var(--accent);color:var(--ink-1);border:0;border-radius:60px;font:inherit;font-size:15px;font-weight:500;letter-spacing:.08em;padding:0 28px;cursor:pointer;white-space:nowrap}
.form button:disabled{opacity:.7;cursor:default}
.form-msg{margin:0;min-height:1em;font-size:14px;color:var(--accent)}
.note{display:flex;align-items:flex-start;gap:8px;margin-left:80px;color:var(--accent)}
.note svg{flex-shrink:0}
.hand{font-family:'Caveat',cursive;font-size:26px;line-height:1.05;white-space:nowrap;transform:rotate(-3deg);margin-top:22px}

.deck-col{display:flex;flex-direction:column;align-items:center;gap:22px}
.eyebrow{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.deck{position:relative;width:min(100%,440px);aspect-ratio:4/5;cursor:pointer;background:none;border:0;padding:0}
.deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;box-shadow:0 30px 60px rgba(0,0,0,.45);user-select:none;pointer-events:none}
.count{position:relative;z-index:10;margin-top:40px;font-size:13px;letter-spacing:.2em;opacity:.6}

.foot{border-top:1px solid rgba(243,233,228,.18)}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;padding-bottom:28px;font-size:14px;letter-spacing:.06em}
.muted{opacity:.8}
.social{display:flex;align-items:center;gap:28px}
.social a{display:flex;align-items:center;gap:10px}

@media (max-width:860px){
  .wrap{padding-left:24px;padding-right:24px}
  .hero{grid-template-columns:1fr;gap:64px;padding-top:32px;padding-bottom:80px}
  .note{margin-left:24px}
  .hand{font-size:22px;white-space:normal}
  .lede{font-size:18px}
}