.book{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(24px,4vw,64px);min-height:min(100svh,780px);padding:clamp(56px,8vw,110px) clamp(20px,4vw,64px);color:#fff;font-family:Funnel Sans,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.book.band{margin-top:clamp(64px,9vw,110px);padding-bottom:calc(clamp(56px,8vw,110px) + 32px);border-radius:32px 32px 0 0;background:#0c0c0d}.book.band+.foot{position:relative;margin-top:-32px}.book.blend{--fade: clamp(88px, 14vw, 200px);margin-top:var(--fade);border-radius:0}.book.blend:before{content:"";position:absolute;inset:auto 0 100%;height:var(--fade);pointer-events:none;background:linear-gradient(#0c0c0d00,#0c0c0d1f 25%,#0c0c0d59,#0c0c0da6,#0c0c0de6 85%,#0c0c0d)}body:has(.book.page){background:#0c0c0d}.book.page{margin-top:0;min-height:calc(100svh - 50px)}.book-art{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 42%,rgba(0,0,0,.22) 80%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 42%,rgba(0,0,0,.22) 80%,transparent)}.book-copy{position:relative;pointer-events:none}.book-title{margin:0;max-width:10ch;font-size:clamp(44px,6.4vw,104px);font-weight:400;line-height:.98;letter-spacing:-.035em;text-wrap:balance}.book-title em{font:italic 400 1.08em/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em}.book-copy p{margin:20px 0 30px;max-width:34ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#ffffffa8}@property --dot-r{syntax: "<length>"; inherits: false; initial-value: 1.2px;}@property --dot{syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.3);}:is(.book-cta,.book-form button){--dot: rgba(255, 255, 255, .3);--dot-r: 1.2px;display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:60px;padding:0 18px 0 20px;border:0;border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff38;background:radial-gradient(circle,var(--dot) var(--dot-r),transparent calc(var(--dot-r) + .7px)) 0 0 / 10px 10px;color:#fff;font:inherit;font-size:17px;font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:--dot-r .6s cubic-bezier(.4,0,.6,1),--dot .6s,color .3s .15s}.book-cta{pointer-events:auto;width:200px}.book-form button{width:150px;margin-left:auto}.book .book-cta,.book-form button:is(:hover,:focus-visible){--dot: #fff;--dot-r: 7.4px;color:#0c0c0d}.book .book-cta:is(:hover,:focus-visible){--dot: rgba(255, 255, 255, .3);--dot-r: 1.2px;color:#fff}:is(.book-cta,.book-form button):focus-visible{outline:2px solid #fff;outline-offset:3px}.book-form button:disabled{opacity:.6;cursor:progress}.book-dots{fill:currentColor}.book-dots circle{animation:bookDots 1.4s ease-in-out infinite}.book-arrow{width:30px;height:21px;transition:translate .3s}:is(.book-cta,.book-form button):is(:hover,:focus-visible) .book-arrow{translate:4px 0}@keyframes bookDots{0%,to{opacity:.4}30%,50%{opacity:1}}.book-form{position:relative;align-self:center;display:grid;align-content:space-between;gap:clamp(14px,1.6vw,22px);min-height:19em;padding:clamp(24px,3vw,44px);border-radius:32px;font-size:clamp(21px,2vw,29px);line-height:1.25;letter-spacing:-.02em;text-shadow:none}.book-or{margin:0;font:inherit;letter-spacing:inherit;color:#ffffff80}.book-form label{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35em;padding-bottom:12px;cursor:text;transition:--dot .3s}.book-form label>span{white-space:nowrap;color:#ffffff9e}.book-form label:before,.book-form label:after{content:"";position:absolute;inset:auto 0 0;height:4px}.book-form label:after{background:radial-gradient(circle,var(--dot) 1.1px,transparent 1.6px) 0 0 / 10px 4px repeat-x}.book-form label:before{z-index:1;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,transparent,#fff,transparent) -55% 0 / 35% 100% no-repeat;-webkit-mask:radial-gradient(circle,#000 1.4px,transparent 1.9px) 0 0 / 10px 4px repeat-x;mask:radial-gradient(circle,#000 1.4px,transparent 1.9px) 0 0 / 10px 4px repeat-x}.book-form label:focus-within{--dot: rgba(255, 255, 255, .75)}.book-form label:focus-within:before{opacity:1;animation:bookRun 1.8s linear infinite}.book-form label:has(:user-invalid){--dot: #ff8a63}@keyframes bookRun{to{background-position:155% 0}}.book-form :is(input,textarea){flex:1 1 9ch;min-width:0;margin:0;padding:0;border:0;border-radius:0;outline:none;background:none;color:#fff;caret-color:#cdd2ff;font:italic 400 1.12em/1.25 "Instrument Serif",Georgia,serif;letter-spacing:0}.book-form ::placeholder{color:#ffffff47}.book-form input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}.book-form .book-msg{padding-bottom:0}.book-form .book-msg:after{content:none}.book-form textarea{flex:none;width:100%;min-height:3lh;max-height:6lh;field-sizing:content;resize:none;line-height:1.6;background:radial-gradient(circle at 5px calc(100% - 2px),var(--dot) 1.1px,transparent 1.6px) 0 0 / 10px 1lh local}.book-send{display:flex;align-items:center;gap:16px;margin-top:6px}.book-note{margin:0;font-size:15px;line-height:1.4;letter-spacing:0;color:#fffc}.book-note.error{color:#ff8a63}.book-tick{display:none;width:clamp(96px,9vw,132px)}.book-form.sent :is(label,button){display:none}.book-form.sent .book-tick{display:block}.book-form.sent .book-note{font-size:inherit;letter-spacing:inherit;color:#fff}@media(max-width:800px){.book{grid-template-columns:1fr;align-items:start;gap:40px}.book-art{-webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.45) 12%,rgba(0,0,0,.45) 88%,transparent);mask-image:linear-gradient(transparent,rgba(0,0,0,.45) 12%,rgba(0,0,0,.45) 88%,transparent)}}@media(prefers-reduced-motion:reduce){.book-dots circle,.book-form label:focus-within:before{animation:none}}.mute{position:fixed;z-index:20;right:18px;bottom:18px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#00000059;color:#ffffffe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:background .2s,border-color .2s}.mute:hover{background:#0000008c;border-color:#fff9}.mute:focus-visible{outline:2px solid #fff;outline-offset:2px}.mute[aria-pressed=true]{color:#ffffff80}@media(max-width:600px){.mute{right:14px;bottom:14px}}
