:root{--forest:#101c16;--gold:#b89964;--cream:#e7dbc0}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--forest);color:var(--cream)}
body{font-family:Lora,Georgia,serif}
main{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:64px 56px 76px;background:#101c16 url('/archive-heirloom-texture.png') center/100% 100% no-repeat}
#ivy-canvas,#ivy-front-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#ivy-front-canvas{z-index:3}
.quiet-border{position:absolute;inset:18px;border:1px solid #a9854b90;pointer-events:none;box-shadow:inset 0 0 0 5px #101c1620,inset 0 0 0 6px #a9854b60;opacity:.8}
.portal{position:relative;z-index:2;text-align:center;width:min(100%,680px)}
.brand{display:block;width:290px;height:138px;max-width:100%;object-fit:contain;margin:0 auto 30px;filter:sepia(.25) saturate(.7)}
.eyebrow{font:500 .8125rem/1.6 Cinzel,serif;letter-spacing:.16em;color:var(--gold);margin:0 0 12px;text-wrap:balance}
h1{font:400 clamp(2rem,5.2vw,4.6rem)/1.14 Cinzel,serif;letter-spacing:.015em;margin:0;text-wrap:balance}
.eyebrow,h1{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.art-stage{position:relative;display:grid;place-items:center;height:270px;margin:14px 0 10px}
.lock-scene{position:relative;width:152px;aspect-ratio:708/943;isolation:isolate}
.lock-sprite{position:absolute;inset:0;background:url('/archive-heirloom-lock-key.png') 19.0821% 32.0988%/216.9492% 108.5896% no-repeat}
.shackle{z-index:1;clip-path:inset(0 0 64.8993% 0);transform-origin:72% 35.1007%}
.lock-body{z-index:2;clip-path:inset(35.1007% 0 0 0)}
.key{position:absolute;z-index:3;left:calc(50% - 15px);top:60%;width:125px;height:36px;opacity:0;transform:translateX(75px)}
.key-art{display:block;position:absolute;left:24px;top:-31px;width:42px;height:89.0354px;background:url('/archive-heirloom-lock-key.png') 88.6228% 56.9106%/418.5286% 131.6195% no-repeat;transform:rotate(90deg)}
.intro{font-size:1.1rem;line-height:1.5;color:var(--cream);max-width:30rem;width:fit-content;margin:0 auto;text-wrap:pretty}
.rule,.footer-rule{display:flex;align-items:center;justify-content:center;gap:5px;margin:18px auto;color:var(--gold);font:12px/1 Georgia,serif;width:170px;opacity:.8}
.rule:before,.rule:after,.footer-rule:before,.footer-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#b8996490)}
.rule:after,.footer-rule:after{transform:rotate(180deg)}
.footer-rule{width:220px;margin:30px auto 0;font-size:26px;gap:14px}
.entry{width:min(100%,420px);margin:0 auto}
label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.input-wrap{position:relative}
input{display:block;width:100%;border:1px solid #b9985990;border-radius:1px;padding:13px 45px 13px 16px;background:#101c1630;color:var(--cream);font:1rem/1.5 Lora,serif;min-height:52px}
input::placeholder{color:#d4cbb7;opacity:1}
.small-key{position:absolute;right:14px;top:11px;width:14px;aspect-ratio:367/778;background:url('/archive-heirloom-lock-key.png') 88.6228% 56.9106%/418.5286% 131.6195% no-repeat;transform:rotate(35deg);pointer-events:none}
button{width:100%;margin-top:12px;padding:14px 12px;border:1px solid #b9985990;border-radius:2px;background:#bd9c5910;color:var(--gold);font:500 .875rem/1.5 Cinzel,serif;letter-spacing:.14em;cursor:pointer;min-height:52px;transition:background .2s}
button:hover{background:#bd9c5920}
input:focus-visible,button:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
button:disabled{cursor:wait;opacity:.7}
.message{font:.875rem/1.6 Montserrat,sans-serif;min-height:23px;color:#ebcc94;margin:10px 0 0}
.preview-surface{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none;background:var(--forest)}
.unlocking .key{animation:key-turn 1.3s ease-in-out forwards}
.unlocking .shackle{animation:open-lock 1.4s ease-in-out forwards}
.revealing .portal{animation:reveal .65s ease-in forwards}
.revealing main{animation:clear-screen .65s ease-in forwards}
@keyframes key-turn{0%{opacity:0;transform:translateX(75px)}25%{opacity:1;transform:translateX(0)}45%{opacity:1;transform:translateX(0) rotateX(0)}75%{opacity:1;transform:translateX(0) rotateX(180deg)}100%{opacity:0;transform:translateX(40px) rotateX(180deg)}}
@keyframes open-lock{0%,55%{transform:translateY(0) rotate(0)}100%{transform:translateY(-16px) rotate(-28deg)}}
@keyframes reveal{to{opacity:0;transform:scale(1.025)}}
@keyframes clear-screen{to{opacity:0}}
@media(max-width:699px){
 main{padding:56px 44px 66px;min-height:max(100svh,210vw)}
 .quiet-border{inset:17px}
 .brand{width:236px;height:112px;margin-bottom:28px}
 .eyebrow{font-size:.75rem;letter-spacing:.16em;margin-bottom:12px}
 h1{font-size:clamp(1.8rem,8.1vw,2.7rem)}
 .art-stage{height:216px;margin:12px 0 8px}
 .lock-scene{width:126px}
 .intro{font-size:1rem;line-height:1.45;max-width:19rem;margin-bottom:0}
 button{letter-spacing:.09em}
}
@media(max-width:359px){main{padding:48px 32px 62px}.brand{width:202px;height:94px}.eyebrow{letter-spacing:.1em}.art-stage{height:200px}.intro{font-size:.9375rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.unlocking .shackle{transform:translateY(-12px)}.revealing .portal{opacity:0}}