@font-face{font-family:"Bodoni Moda";src:url(bodoni-moda.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(bodoni-moda-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(hanken-grotesk.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
:root{--moon:#F4F1EB;--moon-soft:rgba(244,241,235,.72);--night:#1D1E25;--night-2:#15161B;--silver:#B7B8B4;--line-d:rgba(244,241,235,.18);
--serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;--sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--ease:cubic-bezier(.16,1,.3,1);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--night);color:var(--moon);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--moon);outline-offset:3px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}
header{padding-block:28px}
.wm{display:block;height:13px;width:auto;margin-inline:auto}
main{flex:1;display:grid;align-items:center}
.grid{display:grid;gap:40px;align-items:center;padding-block:24px 64px}
@media(min-width:900px){.grid{grid-template-columns:5fr 6fr;gap:80px}.wm{height:16px}}
.moon{position:relative;width:min(62vw,420px);aspect-ratio:1;margin-inline:auto}
.moon img{width:100%;height:100%;display:block}
.moon::after{content:"";position:absolute;inset:-2px;background:var(--night);transform-origin:100% 50%;animation:wax 2.6s var(--ease) .3s both}
@keyframes wax{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.eyebrow{font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--moon-soft);margin:0 0 20px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.015em;margin:0 0 22px;text-wrap:balance}
h1 em{font-style:italic}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--moon-soft);max-width:32em;margin:0 0 10px}
.ritual{font-family:var(--serif);font-style:italic;font-size:20px;margin:0 0 30px}
.field{display:flex;align-items:center;gap:12px;border-bottom:1px solid currentColor;max-width:480px;padding-bottom:8px}
.field input{flex:1;min-width:0;background:none;border:0;padding:15px 0;font:inherit;font-size:16px;color:inherit}
.field input::placeholder{color:var(--moon-soft)}
.field input:focus{outline:none}
.field:focus-within{border-bottom-width:2px}
.field button{flex:none;font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;background:var(--moon);color:var(--night);border:0;border-radius:2px;padding:0 22px;min-height:48px;cursor:pointer;white-space:nowrap;box-shadow:0 0 0 0 rgba(244,241,235,.45);animation:glow 2.8s ease-out 2.6s 2;transition:background .2s,transform .2s}
.field button:hover{background:#fff;transform:translateY(-1px)}
@keyframes glow{70%{box-shadow:0 0 0 12px rgba(244,241,235,0)}100%{box-shadow:0 0 0 0 rgba(244,241,235,0)}}
@media (prefers-reduced-motion:reduce){.field button{animation:none}}
.field button[disabled]{opacity:.5;cursor:progress}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.55;max-width:480px;color:var(--moon-soft)}
.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--moon)}
.msg{font-size:14px;margin:12px 0 0;min-height:1.4em}
.notice{font-size:13px;color:var(--moon-soft);margin-top:18px;max-width:34em}
.done h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 8px}
.hp{position:absolute;left:-9999px}
footer{border-top:1px solid var(--line-d);font-size:12px;color:var(--silver)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px}
footer a{text-decoration:underline;text-underline-offset:3px}
.page{max-width:680px;padding-block:24px 72px}
.page h1{font-size:clamp(32px,5vw,48px)}
.page h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:32px 0 8px}
.page p,.page li{color:var(--moon-soft)}
.page strong{color:var(--moon)}
.rise{animation:rise .9s var(--ease) both}.d1{animation-delay:.9s}.d2{animation-delay:1.05s}.d3{animation-delay:1.2s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}