:root{--paper:#f8f4ec;--canvas:#ebe4d8;--ink:#423b36;--soft:#776c63;--wine:#7e5451;--line:#d9cfc0;--gold:#a98962;--shadow:0 20px 60px #493d3520}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);font:15px/1.6 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #9f7670;outline-offset:4px}button:disabled{cursor:not-allowed}::selection{background:#d9b9ab;color:#312923}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");z-index:10}
.shell{max-width:1120px;margin:auto;padding:35px 38px 80px}.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #b9aa97;padding-bottom:19px}.brand{display:flex;align-items:center;font:500 17px 'Playfair Display',serif;letter-spacing:.01em}.brand-logo{width:29px;height:34px;object-fit:contain;margin-right:10px;filter:drop-shadow(0 1px 1px #493d3540)}.mast-note{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--soft)}.view[hidden]{display:none!important}.view{animation:arrive .5s cubic-bezier(.2,.65,.2,1) both}@keyframes arrive{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
.lock-layout{min-height:min(790px,calc(100svh - 120px));display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:9%;padding:40px 4%}.overline{font-size:11px;text-transform:uppercase;letter-spacing:.26em;font-weight:700;color:var(--wine)}h1,h2,h3,p{margin-top:0}.lock-intro h1,.hall-header h1{font:400 clamp(54px,6.5vw,91px)/1.08 'Playfair Display',serif;letter-spacing:-.055em;margin:28px 0 24px}.lock-intro h1 em,.hall-header h1 em{font-weight:400;color:var(--wine)}.lock-intro p{font-size:16px;color:var(--soft);max-width:380px}.small-rule{width:62px;border:0;border-top:1px solid var(--wine);margin:34px 0}.lock-note{font:italic 24px/1.3 'Caveat',cursive!important;color:var(--wine)!important}.entry-card{background:var(--paper);border:1px solid #d7cbbd;box-shadow:var(--shadow);padding:clamp(28px,5vw,56px);position:relative;transform:rotate(.8deg)}.entry-card:before{content:"✳";position:absolute;top:-28px;right:21px;font-size:32px;color:#b58c83}.entry-card h2{font:400 30px/1.25 'Playfair Display',serif;margin:13px 0}.entry-card p{color:var(--soft);font-size:13px;margin-bottom:25px}.entry-card label{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:700;margin-bottom:9px}.entry-card input{width:100%;border:1px solid #bfb2a3;background:#fffdf9;border-radius:2px;padding:14px 16px;color:var(--ink);font-size:18px;letter-spacing:.25em}.entry-card input[aria-invalid=true]{border-color:#aa5f62;box-shadow:0 0 0 2px #aa5f6225}.error{min-height:27px;font-size:12px;color:#9c4b50;margin:9px 0 5px}.primary{background:var(--wine);color:white;border:1px solid var(--wine);padding:14px 23px;min-height:48px;transition:background .2s,transform .2s}.primary:hover{background:#694341;transform:translateY(-2px)}.entry-card .primary{width:100%}.demo-note{font-size:11px!important;margin:19px 0 0!important;line-height:1.5;color:#81756b!important}.demo-note code{font-size:12px;color:var(--ink)}
.hall-header{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:64px 0 34px;border-bottom:1px solid #c7baaa}.hall-header h1{font-size:clamp(51px,6.4vw,85px);margin:16px 0 0}.hall-header p{color:var(--soft);max-width:420px;margin:0 0 5px}.quiet-button{background:none;border:0;border-bottom:1px solid #ac9484;color:var(--ink);padding:7px 0;font-size:13px;white-space:nowrap}.quiet-button:hover{color:var(--wine)}.hall-toolbar{display:flex;align-items:center;justify-content:space-between;padding:26px 0 22px;color:var(--soft);font-size:12px}.hall-toolbar span:first-child{text-transform:uppercase;letter-spacing:.2em;font-weight:700}.letters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.letter-card{min-height:310px;background:#f8f3eb;border:1px solid #d6c9ba;padding:27px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--ink);box-shadow:0 9px 22px #46382d0a;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}.letter-card:not(:disabled):hover{transform:translateY(-7px) rotate(-.5deg);box-shadow:var(--shadow);border-color:#a98e79}.letter-card:after{content:"";position:absolute;right:-30px;bottom:-65px;width:160px;height:160px;border:1px solid #bcae9b;border-radius:50%;opacity:.5}.letter-card.future{background:#e5ded2;border-color:#cabeb0;box-shadow:none}.letter-card.future:after{display:none}.letter-card .card-top{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--wine);font:italic 31px 'Caveat',cursive}.future .card-top{color:#7f776d}.badge{font:700 10px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;border:1px solid currentColor;padding:5px 9px}.card-num{font-size:11px;letter-spacing:.2em;color:#8b796b}.card-title{font:400 clamp(27px,2.8vw,37px)/1.14 'Playfair Display',serif;letter-spacing:-.035em;margin:auto 0 23px;max-width:270px}.future .card-title{color:#70675e}.card-bottom{border-top:1px solid #d8cbbd;padding-top:15px;width:100%;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--soft)}.card-bottom strong{color:var(--wine);font-weight:600}.future .card-bottom strong{color:#776d65}.footline{border-top:1px solid #c7baaa;margin-top:48px;padding-top:16px;font:italic 24px 'Caveat',cursive;color:var(--soft);display:flex;justify-content:space-between}
.read-nav{padding:32px 0 20px;display:flex;justify-content:space-between;align-items:center;color:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.13em}.read-nav button{min-height:44px;padding:8px 0;background:none;border:0;color:var(--wine);text-transform:none;letter-spacing:0;font-size:14px}.paper-wrap{max-width:790px;margin:0 auto 40px;padding:0 0 30px}.notebook{background-color:#fffdf6;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#bdcfdb8c 40px,#bdcfdb8c 41px);background-position:0 214px;border:1px solid #e6dcd0;box-shadow:1px 15px 45px #4a362a21,7px 7px 0 #f0e9dd;min-height:680px;padding:51px clamp(30px,7vw,88px) 80px;position:relative;transform:rotate(-.3deg)}.notebook:before{content:"";position:absolute;left:clamp(19px,5vw,59px);top:0;bottom:0;border-left:1px solid #d6a7a888}.paper-head{padding-bottom:28px;border-bottom:1px solid #e1d5c9}.paper-head .overline{font-size:10px}.paper-head h2{font:400 clamp(39px,5vw,62px)/1.12 'Playfair Display',serif;letter-spacing:-.045em;margin:13px 0 8px}.paper-date{font:italic 25px 'Caveat',cursive;color:var(--wine)}.letter-body{font:400 clamp(29px,3.6vw,37px)/41px 'Caveat',cursive;color:#3f4b57;padding-top:23px;white-space:pre-line}.letter-body p{margin:0 0 41px}.letter-signature{text-align:right;margin-top:54px;font:italic 36px 'Caveat',cursive;color:var(--wine);white-space:pre-line}.privacy{font-size:11px;color:var(--soft);line-height:1.6;max-width:660px;margin:0 auto 45px;text-align:center}
@media(max-width:760px){.shell{padding:22px 22px 50px}.mast-note{font-size:9px;letter-spacing:.08em}.lock-layout{grid-template-columns:1fr;gap:26px;min-height:auto;padding:58px 0 35px}.lock-intro h1{font-size:clamp(54px,12vw,79px);margin:18px 0}.lock-intro p{max-width:500px}.small-rule{margin:22px 0}.entry-card{transform:none}.hall-header{display:block;padding:44px 0 23px}.hall-header h1{font-size:clamp(52px,11vw,78px)}.hall-header p{margin:0 0 20px}.letters{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.letter-card{min-height:275px;padding:19px}.card-title{font-size:clamp(23px,4vw,33px)}.card-bottom{font-size:10px}.paper-wrap{padding:0 6px}.notebook{padding:44px 29px 65px;background-position:0 203px}.notebook:before{left:16px}.letter-body{font-size:30px;line-height:41px}.footline{font-size:19px}}
@media(max-width:490px){.mast-note{display:none}.letters{grid-template-columns:1fr}.letter-card{min-height:235px}.card-title{font-size:33px}.hall-toolbar{font-size:10px}.read-nav span{display:none}.notebook{padding:36px 31px 60px}.paper-head h2{font-size:39px}.letter-body{font-size:28px}.privacy{padding:0 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* A postal cabinet rather than a generic tile grid. */
.hall-header{border-bottom:0;padding-bottom:18px}.hall-header h1{margin-bottom:14px}
.mailroom{position:relative;margin-top:15px;background:#d9c9b5;border:1px solid #a98d73;padding:28px 29px 24px;box-shadow:inset 0 2px 9px #694d3729,0 27px 55px #4638291f}
.mailroom:before{content:"";position:absolute;inset:8px;border:1px solid #f8eddc88;pointer-events:none}
.mailroom-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 4px 19px;border-bottom:1px solid #9a8068}
.mailroom-label{font:600 11px 'DM Sans',sans-serif;letter-spacing:.23em;text-transform:uppercase;color:#624c3d}
.mailroom-mark{font:italic 26px 'Caveat',cursive;color:#705243}
.mailroom .hall-toolbar{padding:19px 4px;color:#634d40}
.post-sections{display:grid;gap:28px}.mail-group{min-width:0}
.shelf-label{display:flex;align-items:center;gap:18px;margin:0 3px 14px;color:#614b3e;font:700 10px 'DM Sans',sans-serif;letter-spacing:.21em;text-transform:uppercase}
.shelf-label:after{content:"";height:1px;flex:1;background:#9f8771}
.shelf-label span{font:italic 24px 'Caveat',cursive;text-transform:none;letter-spacing:0;font-weight:400}
.letters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;perspective:1000px}
.letter-card{display:block;position:relative;aspect-ratio:1.4;min-height:250px;padding:0;border:1px solid #b8a58f;background:#efe3d0;box-shadow:2px 7px 0 #a68f76,4px 14px 19px #483b2e35;overflow:hidden;text-align:left;color:#4a3b34;isolation:isolate;transform:rotate(var(--tilt,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,filter .35s;animation:envelope-arrive .6s both;animation-delay:var(--delay,0ms)}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(24px) rotate(var(--tilt,0deg))}to{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}}
.letter-card:not(:disabled):hover,.letter-card:not(:disabled):focus-visible{transform:translateY(-13px) rotate(0deg);box-shadow:2px 12px 0 #a68f76,5px 27px 30px #483b2e46;z-index:3}
.letter-card.future{background:#d7c8b4;border-color:#b4a18a;filter:saturate(.7)}
.letter-card:after{display:none}
.envelope-flap{position:absolute;left:0;top:0;width:100%;height:52%;background:#f6ecdd;clip-path:polygon(0 0,100% 0,50% 100%);z-index:3;filter:drop-shadow(0 4px 2px #42312627);transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.future .envelope-flap{background:#e1d2bc}
.envelope-side-left,.envelope-side-right{position:absolute;inset:0;z-index:1;background:#eadac4}
.envelope-side-left{clip-path:polygon(0 0,52% 55%,0 100%)}.envelope-side-right{clip-path:polygon(100% 0,48% 55%,100% 100%)}
.envelope-bottom{position:absolute;inset:0;z-index:2;background:#f3e6d3;clip-path:polygon(0 100%,50% 39%,100% 100%)}
.future .envelope-bottom{background:#dbccb6}
.envelope-content{position:absolute;inset:0;z-index:4;pointer-events:none;padding:15px 18px;display:flex;flex-direction:column;align-items:flex-start}
.envelope-meta{font:700 9px 'DM Sans',sans-serif;letter-spacing:.15em;color:#826e5c;text-transform:uppercase}
.envelope-title{font:600 clamp(27px,2.75vw,36px)/.97 'Caveat',cursive;max-width:77%;margin:auto 0 6px;transform:rotate(-2deg);color:#60463e}
.envelope-to{font:italic 25px 'Caveat',cursive;color:#78564c}
.postmark{position:absolute;right:17px;top:28px;width:68px;height:68px;border:1.4px double #9d7864;border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(-16deg);font:700 8px/1.35 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#876957;opacity:.78}
.postmark:before{content:"";position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%}
.postmark span{position:relative;z-index:1}
.wax{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:48% 54% 46% 53%;background:#8b5250;border:3px solid #9d6560;box-shadow:inset 2px 2px 5px #e1b1a750,inset -3px -4px 6px #48252470,1px 4px 5px #48382f50;z-index:5;display:grid;place-items:center;color:#f7e5d4;font:italic 27px 'Playfair Display',serif;transition:opacity .3s,transform .45s}
.future .wax{background:#877664;border-color:#988676;color:#f2e7d7}
.envelope-date{position:absolute;bottom:12px;right:16px;font:600 10px 'DM Sans',sans-serif;color:#70594a;background:#eee1cfcc;padding:3px 5px}
.letter-card.opening .envelope-flap{transform:rotateX(175deg);z-index:0}
.letter-card.opening .wax{transform:translate(-50%,-200%) scale(.55);opacity:0}
.letter-card.opening{transform:translateY(-18px) rotate(0deg) scale(1.035);z-index:5}
.shelf-foot{margin:15px 3px 0;color:#6d5444;font:italic 24px 'Caveat',cursive}
.mailroom-bottom{height:16px;margin:25px -29px -24px;background:#b49d83;border-top:1px solid #8b7158;box-shadow:inset 0 5px 8px #4c39262a}
#reading .notebook{animation:unfold .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes unfold{from{opacity:0;transform:translateY(38px) rotate(-1.5deg) scale(.97)}to{opacity:1;transform:translateY(0) rotate(-.3deg) scale(1)}}
.entry-card{animation:soft-breathe 5s ease-in-out infinite alternate}
@keyframes soft-breathe{to{box-shadow:0 24px 65px #784b392c}}
@media(max-width:800px){.mailroom{padding:22px 22px 20px}.letters{grid-template-columns:repeat(2,minmax(0,1fr))}.mailroom-bottom{margin:25px -22px -20px}.letter-card{min-height:235px}}
@media(max-width:560px){.mailroom{padding:18px 14px 16px;margin:10px -7px 0}.mailroom-top{padding-bottom:12px}.mailroom-mark{font-size:21px}.mailroom .hall-toolbar{display:block;line-height:1.9}.letters{grid-template-columns:1fr;gap:22px}.letter-card{min-height:225px;aspect-ratio:1.55}.envelope-title{font-size:37px}.mailroom-bottom{margin:20px -14px -16px}.hall-header{padding-top:43px}.hall-header h1{font-size:clamp(46px,11vw,70px)}}
@media(prefers-reduced-motion:reduce){.letter-card,.entry-card,#reading .notebook{animation:none!important}.letter-card,.envelope-flap,.wax{transition:none!important}}

/* Locked mail is a game-like sealed chapter, not a disabled-looking blank. */
.letter-card.future{cursor:pointer;filter:saturate(.73);outline:1px solid #816d5966;outline-offset:-7px}
.letter-card.future:before{content:"";position:absolute;inset:7px;border:1px dashed #80695498;pointer-events:none;z-index:7}
.future .envelope-content{filter:contrast(.88)}
.lock-ribbon{position:absolute;z-index:8;top:8px;left:50%;transform:translateX(-50%);padding:3px 13px;background:#655148;color:#f6ebd7;border:1px solid #9c8067;font:700 9px 'DM Sans',sans-serif;letter-spacing:.15em;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 3px #513a292e;pointer-events:none}
.lock-crest{position:absolute;z-index:8;top:44%;left:50%;transform:translate(-50%,-50%);width:61px;height:63px;background:#655047;border:2px solid #bca582;outline:3px solid #55403555;outline-offset:2px;box-shadow:inset 0 0 0 2px #806757,0 5px 12px #44322555;display:grid;place-items:center;color:#f4e5c8;pointer-events:none}
.lock-crest svg{width:29px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.letter-card:not(.future) .wax{top:30%}
.letter-card:not(.future) .envelope-title{font-size:clamp(26px,2.5vw,33px);max-width:88%;transform:none}
@media(max-width:560px){.letter-card:not(.future) .envelope-title{font-size:33px}}
.future .envelope-meta{padding-top:19px}
.future .lock-crest{top:32%} @media(max-width:560px){.future .lock-crest{top:34%}} .future .wax{display:none}
.future .envelope-title{font-size:clamp(26px,2.45vw,32px);max-width:85%;margin-top:auto;margin-bottom:3px;transform:none}
.future .envelope-to{font-size:21px}
.future .envelope-date{z-index:9;font-size:11px;color:#4e3b32;background:#e9ddcb}
@media(max-width:560px){.future .envelope-title{font-size:32px;max-width:83%}}
.letter-card.future:hover{filter:saturate(.85) brightness(1.025);box-shadow:2px 9px 0 #a68f76,4px 18px 22px #483b2e40}
.letter-card.future:focus-visible{outline:3px solid #685044;outline-offset:3px}
.letter-card.future.rattling{animation:lock-rattle .52s cubic-bezier(.22,.72,.27,1) both!important}
@keyframes lock-rattle{0%,100%{transform:translateX(0) rotate(var(--tilt))}18%{transform:translateX(-8px) rotate(-2.2deg)}38%{transform:translateX(7px) rotate(1.8deg)}58%{transform:translateX(-5px) rotate(-1deg)}76%{transform:translateX(3px) rotate(.5deg)}}
.lock-feedback{min-height:28px;margin:9px 3px 0;color:#574138;font:italic 23px/1.2 'Caveat',cursive;opacity:0;transition:opacity .2s}
.lock-feedback.visible{opacity:1}
/* Actual paper rises after the flap folds back, before the reading view. */
.letter-insert{position:absolute;top:10%;left:8%;width:84%;height:80%;z-index:1;border:1px solid #d8cbbc;background:#fffaf0 repeating-linear-gradient(to bottom,transparent 0,transparent 24px,#b9cbd277 25px,#b9cbd277 26px);box-shadow:0 3px 9px #493c3333;padding:17px 15px;opacity:0;pointer-events:none;transform:translateY(0) rotate(-2deg)}
.letter-insert span{display:block;color:#59433f;font:600 26px/.95 'Caveat',cursive;max-width:88%;text-align:left}
.letter-card.opening{overflow:visible!important;isolation:auto}
.letter-card.opening .envelope-flap{transform:rotateX(175deg);z-index:0}
.letter-card.opening .letter-insert{animation:paper-extract .75s .38s cubic-bezier(.16,.75,.23,1) forwards;z-index:8}
@keyframes paper-extract{0%{opacity:0;transform:translateY(0) rotate(-2deg)}15%{opacity:1}55%{transform:translateY(-58%) rotate(-1deg)}100%{opacity:1;transform:translateY(-67%) rotate(0deg) scale(1.05)}}
.letter-card.opening .wax{transform:translate(-50%,-200%) scale(.55);opacity:0}
#reading .notebook{animation:read-unfold .78s cubic-bezier(.17,.72,.2,1) both;transform-origin:50% 10%}
@keyframes read-unfold{from{opacity:0;transform:translateY(65px) rotateX(-18deg) rotate(-1.6deg) scale(.86)}to{opacity:1;transform:translateY(0) rotateX(0) rotate(-.3deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.letter-card.future.rattling,.letter-card.opening .letter-insert,#reading .notebook{animation:none!important}.letter-card.opening .letter-insert{opacity:1;transform:none}.lock-feedback{transition:none}}

/* Hinged entry: a real door frame and leaf, no 3D dependency. */
.lock-layout{grid-template-columns:.75fr 1.25fr;gap:5%;min-height:min(780px,calc(100svh - 110px))}
.lock-intro h1{font-size:clamp(54px,6vw,82px)}.door-frame{position:relative;perspective:1100px;width:min(100%,490px);height:620px;margin:auto;border:12px solid #8d7056;background:#4d382e;box-shadow:inset 0 0 0 5px #be9b78,0 22px 50px #3b291e48;overflow:visible}
.door-recess{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#87745f,#45342a 75%);display:grid;place-items:center;color:#ead8bb;font:400 37px 'Playfair Display',serif;letter-spacing:.15em}
.door-leaf{position:absolute;inset:0;padding:54px 42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#947659,#af8f6e 8%,#a58566 91%,#785c47);border:5px solid #6b513e;box-shadow:inset 0 0 0 5px #c2a382,inset 0 0 0 13px #775b44,5px 7px 20px #31251c66;transform-origin:0 50%;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .82s cubic-bezier(.23,.74,.26,1);z-index:2}
.door-leaf:before{content:"";position:absolute;inset:29px;border:3px solid #70523c;box-shadow:inset 0 0 0 5px #c1a07d,inset 0 0 0 9px #70523c;pointer-events:none}
.door-rail{position:absolute;left:38px;right:38px;top:30px;height:85px;border:2px solid #70523c;box-shadow:inset 0 0 0 4px #b99a79,inset 0 0 0 8px #76583e}
.door-handle{position:absolute;right:14px;top:49%;height:70px;width:22px;border-radius:12px;background:linear-gradient(90deg,#806039,#d7bb78,#8f6c3d);box-shadow:2px 3px 5px #3d2a1d80}
.door-opening .door-leaf{transform:rotateY(-104deg)}
.entry-card{width:100%;position:relative;z-index:2;transform:none;animation:none;padding:30px 26px;background:#f8f3eb;box-shadow:0 12px 30px #392b2350}
.entry-card:before{display:none}.entry-card h2{font-size:29px}.entry-card .demo-note{margin:12px 0 0!important}
.lock-intro p:empty,.entry-card p:empty,.hall-header p:empty,.mailroom-mark:empty,.read-nav span:empty{display:none}
.hall-header{padding-top:40px}.hall-header h1{margin:10px 0 0}.hall-toolbar{padding:15px 0}.mailroom .hall-toolbar{padding:10px 4px}.mailroom-top{padding-bottom:10px}
/* A single unadorned lock seal replaces the game badges. */
.lock-ribbon{display:none}.lock-crest{top:34%;width:54px;height:54px;border-radius:48% 54% 46% 53%;background:#80605a;border:3px solid #9d7770;outline:0;box-shadow:inset 2px 2px 5px #d5a3a350,inset -3px -4px 6px #40252470,1px 4px 5px #48382f50}.lock-crest svg{width:23px;height:27px;stroke-width:2}.future .lock-crest{top:34%}
.future .envelope-meta{padding-top:0}.future .envelope-title{margin-top:auto}.future .wax{display:none}.future .envelope-date{z-index:9}
/* One physical paper moves from envelope to full reading surface. */
.letter-card.opening .letter-insert{animation:paper-extract-connected .72s cubic-bezier(.2,.7,.2,1) forwards;z-index:8}
@keyframes paper-extract-connected{0%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:1;transform:translateY(-35%)}}
.paper-journey{background-color:#fffdf6;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#bdcfdb8c 40px,#bdcfdb8c 41px);border:1px solid #d8cbbc;box-shadow:0 8px 28px #493c3345;overflow:hidden;padding:25px;min-height:0!important}
.paper-journey .letter-body,.paper-journey .letter-signature{opacity:0;animation:words-arrive .4s .35s forwards}
@keyframes words-arrive{to{opacity:1}}
#reading .notebook{animation:none}.notebook.journey-hidden{visibility:hidden}
.entry-card .primary{color:#fff;font-weight:700}.entry-card input{color:#332822;background:#fffdf8}.entry-card .demo-note{color:#4d4037!important}
@media(max-width:560px){.hall-header .quiet-button{display:inline-block;margin:13px 0 0}.mailroom .hall-toolbar span{display:block}.mailroom .hall-toolbar span+span{margin-top:4px}.mailroom .letters{padding:0 4px}.mailroom{margin-left:0;margin-right:0}}
@media(max-width:760px){.lock-layout{display:flex;flex-direction:column;min-height:auto;padding:32px 0 35px;gap:20px}.lock-intro h1{font-size:clamp(51px,11vw,72px);margin:8px 0}.door-frame{width:min(100%,390px);height:525px}.door-leaf{padding:35px 28px}.door-leaf:before{inset:19px}.door-rail{left:26px;right:26px;top:20px;height:62px}.door-handle{right:8px}.entry-card{padding:25px 22px}.entry-card h2{font-size:26px}}
@media(max-width:390px){.door-frame{height:505px}.door-leaf{padding:29px 20px}}
@media(prefers-reduced-motion:reduce){.door-leaf{transition:none!important}.letter-card.opening .letter-insert{animation:none!important}.paper-journey{display:none!important}}

/* Both fold tips meet at 52% of the envelope height, under the seal. */
.envelope-bottom{clip-path:polygon(0 100%,50% 52%,100% 100%)}
.letter-card:not(.future) .wax,.future .lock-crest{top:52%;left:50%;width:52px;height:52px;transform:translate(-50%,-50%);z-index:9;border-radius:48% 53% 47% 52%;background:#87514e;border:3px solid #a56a60;box-shadow:inset 2px 2px 5px #d8a69a65,inset -3px -4px 6px #4323208a,1px 4px 5px #48382f55}
.wax img{display:block;width:68%;height:76%;object-fit:contain;filter:drop-shadow(0 1px 1px #3f25224d)}
.future .lock-crest{display:grid;background:#76605a;border-color:#92776c;outline:0}.future .lock-crest svg{stroke:#eedfcd;width:22px;height:27px}
.future .wax{display:none}
.letter-card:not(.future) .envelope-title,.future .envelope-title{font-size:clamp(26px,2.5vw,32px);max-width:87%;margin-bottom:2px}.letter-card:not(.future) .envelope-title{position:absolute;left:18px;top:calc(52% + 34px);max-width:72%;margin:0;font-size:clamp(25px,2vw,29px);line-height:.9;transform:none}.letter-card:not(.future) .envelope-to{position:absolute;left:18px;bottom:2px;font-size:22px}.letter-card:not(.future) .envelope-date{bottom:2px}
/* The code plate is fitted into the door, not pinned over it. */
.door-recess{background:#090807;box-shadow:inset 0 0 32px #000,inset 0 0 0 4px #30251d}
.door-leaf{background:linear-gradient(90deg,#715137 0%,#ae8762 6%,#aa8160 49%,#9c7657 94%,#6e4e37 100%);border:4px solid #654733;box-shadow:inset 0 0 0 4px #bb9974,inset 0 0 0 13px #76553d,7px 7px 20px #2b1b1260}
.door-leaf:before{inset:26px;border:2px solid #6b4831;box-shadow:inset 0 0 0 4px #c4a17b,inset 0 0 0 10px #805b40;z-index:0}
.door-panel{position:absolute;inset:124px 34px 35px;border:2px solid #6c4a33;box-shadow:inset 0 0 0 5px #bb9773,inset 0 0 0 10px #79563e;pointer-events:none}
.entry-card{width:min(100%,292px);padding:18px 20px 15px;background:linear-gradient(135deg,#dec7a5,#c5a880);border:2px solid #6f5039;outline:3px solid #bb9872;box-shadow:inset 0 0 0 2px #ebd2ad,0 4px 10px #4931227a;transform:none}
.entry-card h2{font-size:23px;margin:5px 0 13px}.entry-card .overline{color:#654635;font-size:9px}.entry-card label{margin-bottom:6px}.entry-card input{background:#eadbc2;color:#30241e;border:1px solid #815f47;box-shadow:inset 0 2px 5px #69452a37;padding:9px 12px;height:43px}
.entry-card .primary{background:#654838;color:#fff;border-color:#4f3529;min-height:43px;padding:9px 12px;font-size:13px}.entry-card .primary:hover{background:#493328}
.entry-card .error{min-height:20px;margin:5px 0 2px}.entry-card .demo-note{font-size:10px!important;color:#49372c!important;margin:9px 0 0!important}
.door-handle{right:9px;top:53%;width:16px;height:58px;background:linear-gradient(90deg,#674e2e,#d9bb79,#8b683a)}
@media(max-width:760px){.door-panel{inset:94px 22px 24px}.entry-card{width:min(100%,265px);padding:16px 15px}.door-leaf{padding:26px 19px}.door-handle{right:4px}.letter-card:not(.future) .wax,.future .lock-crest{top:52%}}
@media(max-width:390px){.door-panel{inset:85px 18px 20px}.entry-card{width:min(100%,250px)}}
.letter-body .anniversary-shout{text-align:center;font-weight:700;color:var(--wine);margin:58px auto 66px;max-width:18ch;line-height:1.12;text-wrap:balance}

/* The wedding monogram wax seal dissolves BEFORE the flap swings back. */
.letter-card.opening:not(.future) .wax{animation:unseal .34s ease-out forwards!important;z-index:10}
@keyframes unseal{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-95%) scale(.65)}}
.letter-card.opening .envelope-flap{transition-delay:.23s}
@media(prefers-reduced-motion:reduce){.letter-card.opening:not(.future) .wax{animation:none!important;opacity:0}}
/* A circular vault in the existing frame: bolted face, wheel and small keypad. */
.door-frame{border-color:#755f4e;background:#110e0d;box-shadow:inset 0 0 0 5px #a88b68,0 24px 55px #33282150}
.door-recess{background:#050505;box-shadow:inset 0 0 35px #000}
.door-leaf{padding:0;background:radial-gradient(circle at 38% 29%,#a98d71 0,#7a6251 40%,#483d36 85%);border:6px solid #554238;box-shadow:inset 0 0 0 8px #a48a6b,inset 0 0 0 17px #5b493e,8px 8px 25px #251c1a88}
.door-leaf:before{inset:24px;border:2px solid #c0a27e;border-radius:50%;box-shadow:inset 0 0 0 8px #4b3e36,inset 0 0 0 13px #aa8e70,inset 0 0 0 22px #4a3e37,inset 0 0 0 25px #9f856b;z-index:0}
.vault-round{position:absolute;inset:15% 11%;border-radius:50%;border:7px solid #3c322d;background:radial-gradient(circle at 38% 30%,#bc9c79,#796350 54%,#4c4038);box-shadow:0 0 0 5px #a58768,0 0 0 14px #4c3c33,inset 0 0 0 5px #b19573,inset 0 0 0 16px #5e4b3e,inset 0 0 0 19px #c4a77f;display:grid;place-items:center}
.vault-bolts{position:absolute;inset:0;pointer-events:none}.vault-bolts i{position:absolute;top:50%;left:50%;height:19px;width:34px;margin:-10px -17px;border-radius:6px;background:linear-gradient(#e0bd87,#735943);box-shadow:0 2px 4px #221916;transform:rotate(var(--a)) translateY(-255px)}.vault-bolts i:nth-child(1){--a:0deg}.vault-bolts i:nth-child(2){--a:60deg}.vault-bolts i:nth-child(3){--a:120deg}.vault-bolts i:nth-child(4){--a:180deg}.vault-bolts i:nth-child(5){--a:240deg}.vault-bolts i:nth-child(6){--a:300deg}
.vault-wheel{width:148px;height:148px;border-radius:50%;border:6px solid #3c302b;background:radial-gradient(circle,#c6a477 0 19%,#685445 20% 31%,#c4a478 32% 38%,#59493c 39%);box-shadow:inset 0 0 0 5px #c5a47b,0 7px 18px #241b17aa;position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.vault-logo{position:absolute;left:50%;top:50%;z-index:2;width:27px;height:32px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px #30201788)}.vault-wheel span{position:absolute;left:50%;top:50%;width:12px;height:82px;margin:-41px -6px;border-radius:8px;background:linear-gradient(90deg,#614d3b,#d4b484,#6b543e);box-shadow:0 2px 4px #261e18;transform:rotate(var(--angle)) translateY(-66px)}.vault-wheel span:nth-child(1){--angle:0deg}.vault-wheel span:nth-child(2){--angle:90deg}.vault-wheel span:nth-child(3){--angle:180deg}.vault-wheel span:nth-child(4){--angle:270deg}
.keypad-trigger{position:absolute;right:8%;bottom:10%;z-index:3;display:flex;align-items:center;gap:9px;min-width:142px;min-height:52px;padding:7px 11px;background:#332b29;border:3px solid #b99b77;box-shadow:inset 0 0 0 2px #635044,0 5px 12px #201a18a8;color:#f1dfbe;font:700 10px 'DM Sans',sans-serif;letter-spacing:.11em;transition:transform .2s,box-shadow .2s}.keypad-trigger:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px #635044,0 8px 15px #201a18aa}.keypad-icon{font-size:17px;line-height:.7;letter-spacing:.25em;color:#c9a982}
.keypad-engaging .keypad-trigger{transform:scale(.93);box-shadow:inset 0 0 0 2px #ad8d68,0 0 0 6px #d8b98b55}.keypad-engaging .vault-wheel,.door-opening .vault-wheel{transform:rotate(85deg)}
.keypad-trigger:focus-visible{outline:3px solid #f3ddb1;outline-offset:4px}.keypad-trigger span:last-child:after{content:' ↗';font-size:14px}.vault-bolts i{transition:transform .3s ease .05s}.door-opening .vault-bolts i{transform:rotate(var(--a)) translateY(-222px)}
@media(max-width:760px){.door-opening .vault-bolts i{transform:rotate(var(--a)) translateY(-185px)}}@media(max-width:390px){.door-opening .vault-bolts i{transform:rotate(var(--a)) translateY(-168px)}}
#passcode-dialog{border:1px solid #a58c71;background:#f7f1e7;color:var(--ink);width:min(92vw,380px);padding:0;box-shadow:0 25px 80px #080706a8}#passcode-dialog::backdrop{background:#150f0bc9;backdrop-filter:blur(3px)}#passcode-dialog[open]{animation:dialog-rise .3s cubic-bezier(.2,.7,.2,1) both}@keyframes dialog-rise{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.vault-form{position:relative;padding:35px}.vault-form h2{font:400 29px 'Playfair Display',serif;margin:8px 0 25px}.vault-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px}.vault-form input{width:100%;height:50px;padding:10px 14px;border:1px solid #9f8974;background:#fffdfa;letter-spacing:.2em;color:#342921}.vault-form input[aria-invalid=true]{border-color:#a54b4b}.vault-form .error{margin:8px 0 6px}.vault-form .primary{width:100%}.vault-form .demo-note{margin:16px 0 0;font-size:11px;color:#655b51}.dialog-close{position:absolute;right:16px;top:10px;background:none;border:0;font-size:27px;color:#665b51;min-width:44px;min-height:44px}
@media(max-width:760px){.door-leaf{padding:0}.door-leaf:before{inset:17px}.vault-round{inset:17% 8%}.vault-bolts i{transform:rotate(var(--a)) translateY(-214px)}.vault-wheel{width:123px;height:123px}.vault-wheel span{height:68px;margin:-34px -6px;transform:rotate(var(--angle)) translateY(-55px)}.keypad-trigger{right:7%;bottom:9%;min-width:137px}}
@media(max-width:390px){.vault-bolts i{transform:rotate(var(--a)) translateY(-195px)}}
@media(prefers-reduced-motion:reduce){.vault-wheel,.keypad-trigger{transition:none!important}#passcode-dialog[open]{animation:none!important}}

/* The entire vault face is the accessible trigger. The code appears separately. */
.vault-instruction{font-size:13px!important;letter-spacing:.04em;color:#665449!important;margin-top:15px!important}
.keypad-trigger{display:none!important}
.vault-face-trigger{position:absolute;inset:0;z-index:6;display:block;width:100%;height:100%;border:0;background:transparent;cursor:pointer;border-radius:0;touch-action:manipulation}
.vault-face-trigger:hover{box-shadow:inset 0 0 35px #e2be8040}
.vault-face-trigger:focus-visible{outline:4px solid #f3ddb1;outline-offset:-17px}
.door-opening .vault-face-trigger{pointer-events:none}
/* Mechanism: wheel turns twice, bolts withdraw, then the heavy door swings. */
.door-opening .vault-wheel{animation:vault-unlock-spin 1.35s cubic-bezier(.32,.04,.25,1) forwards!important;transition:none!important}
@keyframes vault-unlock-spin{0%{transform:rotate(0)}43%{transform:rotate(430deg)}72%{transform:rotate(650deg)}100%{transform:rotate(760deg)}}
.door-opening .vault-bolts i{transition:transform .42s ease 1.12s}
.door-opening .door-leaf{transition:transform .9s cubic-bezier(.35,.02,.24,1) 1.43s}
@media(prefers-reduced-motion:reduce){.door-opening .vault-wheel{animation:none!important;transform:none!important}.door-opening .vault-bolts i,.door-opening .door-leaf{transition:none!important}}

/* Server-backed application refinements. */
.loading-note,.empty-note{padding:28px 4px;color:#624c3d;font:italic 24px Caveat,cursive}
.network-error{max-width:620px;margin:30px auto;padding:18px 20px;background:#f7ede2;border:1px solid #a87972;color:#713f3f}
.privacy{max-width:720px}
@media(max-width:760px){.vault-bolts i{display:none}.door-frame{height:min(500px,64vh);min-height:430px}.lock-intro{text-align:center}.vault-instruction{margin-left:auto;margin-right:auto;color:#514238!important;font-weight:600}.lock-layout{padding-top:22px;gap:14px}}
@media(max-width:420px){.shell{padding:16px 16px 28px}.mast{padding-bottom:12px}.lock-intro h1{font-size:clamp(44px,12vw,54px);line-height:1.02}.door-frame{height:430px;min-height:430px}.vault-logo{width:24px;height:29px}}