@font-face{font-family:Display;src:url(/fonts/Anybody-900x150.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Wide;src:url(/fonts/Anybody-700x125.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/GeistMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Text;src:url(/fonts/Geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--wax:#6e0912;--wax-d:#4f0610;--wax-l:#8e1420;--ink:#f5e6d6;--ink2:rgba(245,230,214,.72);--ink3:rgba(245,230,214,.42);--gold:#e8b866;--gold2:#ffd994;--rule:rgba(245,230,214,.22)}
*{box-sizing:border-box}
html{background:var(--wax);scroll-behavior:smooth}
body{margin:0;background:var(--wax);color:var(--ink);font:400 17px/1.5 Text,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* fine grain over the whole page, like the surface of wax */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
::selection{background:var(--gold);color:var(--wax-d)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(16px,3.4vw,48px);mix-blend-mode:normal}
.mark{font:900 21px/1 Display,sans-serif;letter-spacing:-.01em;text-decoration:none}
.top a,.top button{text-shadow:0 1px 14px rgba(60,0,8,.75)}
.top nav{display:flex;gap:clamp(16px,2.6vw,36px);align-items:center}
.top nav a,#walletBtn{font:500 15px Text,sans-serif;text-decoration:none;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;position:relative}
.top nav a::after,#walletBtn::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.top nav a:hover::after,#walletBtn:hover::after,#walletBtn.on::after{transform:scaleX(1)}
#walletBtn.on{color:var(--gold2)}

/* hero: the film is the page */
.scrub{height:420vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#film{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 clamp(16px,3.4vw,48px) 28px;font:500 15px/1.35 Text,sans-serif}
#heroCopy{margin:0;transition:opacity .3s}
.beats{margin:0;justify-self:center;position:relative;height:1.35em;width:12ch;text-align:center}
.beat{position:absolute;inset:0;opacity:0;transition:opacity .45s;font:700 15px Wide,sans-serif;letter-spacing:.02em}
#scrollHint{margin:0;justify-self:end;color:var(--ink2);transition:opacity .3s}

/* statement */
.statement{padding:clamp(110px,18vw,260px) clamp(16px,6vw,96px) clamp(90px,14vw,200px);text-align:center}
.big{font:700 clamp(28px,4.4vw,68px)/1.1 Wide,sans-serif;letter-spacing:-.015em;max-width:21ch;margin:0 auto;text-wrap:balance}
.big em{font-style:normal;color:var(--gold)}
.ca{margin:clamp(48px,6vw,80px) auto 0;display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.ca span{font:700 15px Wide,sans-serif}
.ca code{font:500 15px Mono,monospace;color:var(--ink2);word-break:break-all}
.ca code i{font-style:normal;color:var(--ink3)}
.ca code em{font-style:normal;color:var(--gold2)}
.ca button,.ca a{font:500 15px Text,sans-serif;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule)}

/* the press */
.press{padding:clamp(40px,8vw,120px) clamp(16px,5vw,80px) clamp(90px,12vw,170px);border-top:1px solid var(--rule)}
.sentence{font:900 clamp(38px,7.4vw,124px)/1.02 Display,sans-serif;letter-spacing:-.025em;text-align:center;margin:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px);text-wrap:balance}
.sentence input{font:inherit;letter-spacing:inherit;color:var(--gold);background:none;border:0;border-bottom:.06em solid var(--gold);padding:0 .04em;margin:0;outline:0;text-align:center;min-width:2ch;max-width:100%;border-radius:0}
.sentence input::placeholder{color:rgba(232,184,102,.42)}
#fSym{text-transform:uppercase}
.table{display:grid;justify-items:center;gap:18px}
.wax{width:min(460px,86vw);aspect-ratio:1;filter:drop-shadow(0 38px 46px rgba(35,0,4,.55))}
.wax canvas{width:100%;height:100%;display:block}
.addr{font:500 clamp(12px,1.25vw,16px) Mono,monospace;margin:6px 0 0;color:var(--ink3);text-align:center;word-break:break-all;max-width:44ch}
.addr .tail{color:var(--gold2)}
.addr.found .head{color:var(--ink)}
.stats{margin:0;color:var(--ink3);font-size:14px;text-align:center}
.stats b{font:500 14px Mono,monospace;color:var(--ink2)}
.fine{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;max-width:1180px;margin:clamp(56px,7vw,96px) auto 0}
.fine label{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink2)}
.fine .w2{grid-column:span 1}
.fine input{font:500 17px Text,sans-serif;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:6px 0 10px;outline:0;border-radius:0;width:100%}
.fine input:focus{border-bottom-color:var(--gold)}
.fine input::placeholder{color:var(--ink3)}
.fine input[type=file]{font-size:13px;color:var(--ink3)}
.fine input[type=file]::file-selector-button{font:500 13px Text,sans-serif;color:var(--ink);background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:0;margin-right:10px;cursor:pointer}
.go{display:grid;justify-items:center;gap:20px;margin-top:clamp(56px,7vw,90px)}
/* the press button: a gold wax-stamp disc */
#launchBtn{position:relative;width:156px;height:156px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:radial-gradient(circle at 34% 28%,#fff1c8 0,#f2cb7c 18%,#c7913f 46%,#8a5a1d 74%,#5e3a10 100%);
  box-shadow:inset 0 2px 2px rgba(255,248,224,.8),inset 0 -6px 14px rgba(60,30,0,.55),0 22px 40px rgba(30,0,3,.55),0 0 0 10px rgba(232,184,102,.07);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#launchBtn::before{content:"";position:absolute;inset:12px;border-radius:50%;border:2px dotted rgba(70,38,6,.55)}
#launchBtn span{font:900 22px Display,sans-serif;letter-spacing:.02em;color:#4a2a07;text-shadow:0 1px 0 rgba(255,236,190,.65),0 -1px 0 rgba(60,30,0,.4)}
#launchBtn:hover{transform:translateY(-3px) rotate(-4deg)}
#launchBtn:active{transform:translateY(2px) scale(.97)}
#launchBtn:disabled{cursor:wait;filter:saturate(.6) brightness(.85)}
.status{margin:0;max-width:44ch;text-align:center;color:var(--ink2);font-size:15px}

/* registry: a case of struck seals */
.registry{padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--rule)}
.registry h2{font:900 clamp(40px,8vw,132px)/.95 Display,sans-serif;letter-spacing:-.03em;margin:0 clamp(16px,5vw,80px) clamp(40px,5vw,70px)}
.strip{display:flex;gap:clamp(20px,3vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(16px,5vw,80px) 24px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.seal{flex:0 0 clamp(220px,24vw,300px);scroll-snap-align:start;text-decoration:none;text-align:center}
.seal canvas{width:100%;aspect-ratio:1;display:block;filter:drop-shadow(0 20px 26px rgba(35,0,4,.5));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.seal:hover canvas{transform:rotate(-8deg) scale(1.04)}
.seal b{display:block;font:700 19px Wide,sans-serif;margin-top:10px}
.seal code{font:500 13px Mono,monospace;color:var(--ink3)}.seal code em{font-style:normal;color:var(--gold2)}
.seal .curve{height:1px;background:var(--rule);margin:14px 20% 8px;position:relative}.seal .curve i{position:absolute;inset:0 auto 0 0;background:var(--gold)}
.seal small{font-size:12px;color:var(--ink3)}
.empty{color:var(--ink3);margin:0}

footer{padding:clamp(40px,6vw,80px) clamp(16px,3.4vw,48px) 30px;border-top:1px solid var(--rule);overflow:hidden}
.tailmark{margin:0;font:900 clamp(64px,18vw,340px)/.8 Display,sans-serif;letter-spacing:-.05em;white-space:nowrap;text-align:center;color:var(--ink)}
.tailmark span{color:var(--gold)}
footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(30px,4vw,56px);font-size:14px;color:var(--ink2)}
footer .row span:first-child{font:900 16px Display,sans-serif;color:var(--ink)}

.toast{position:fixed;left:50%;bottom:26px;z-index:60;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--wax-d);padding:12px 18px;font:500 14px Text,sans-serif;transition:.25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){.fine{grid-template-columns:1fr 1fr}.fine .w2{grid-column:1/-1}}
@media (max-width:640px){
  .top nav a:not(#xLink){display:none}
  .foot{grid-template-columns:1fr auto;font-size:14px}.beats{display:none}
  .fine{grid-template-columns:1fr}
  .sentence{font-size:11vw}.sentence #fName{font-size:.72em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}