:root { --bone: #e9e4d8; --dim: rgba(233,228,216,.55); --line: rgba(233,228,216,.18); --blood: #b12a2a; }
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { background: radial-gradient(ellipse at 50% 0%, #1a1c1c, #050606 70%) fixed; color: var(--bone);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; line-height: 1.6; }
a { color: inherit; }
[hidden] { display: none !important; }

.lock { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 16px; }
.padlock-wrap { width: clamp(160px, 36vw, 240px); }
.padlock { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 22px rgba(0,0,0,.8)); transition: filter .5s; }
.lock.wrong .padlock-wrap { animation: shake .5s; }
.lock.wrong .padlock { filter: drop-shadow(0 16px 22px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(120,8,8,.6)); }
@keyframes shake { 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(9px) rotate(1.5deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.lock input { width: min(240px, 70vw); background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--bone);
  font: inherit; font-size: 22px; text-align: center; padding: 8px; letter-spacing: .3em; outline: none; transition: border-color .3s; caret-color: var(--bone); }
.lock input:focus { border-color: rgba(233,228,216,.55); }
.lock.busy input { opacity: .4; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lock button, .btn { background: transparent; border: 1px solid var(--line); color: var(--bone); cursor: pointer;
  font: 400 11px Cinzel, serif; letter-spacing: .35em; text-transform: uppercase; padding: 12px 26px; transition: border-color .3s, background .3s; }
.lock button:hover, .btn:hover { border-color: var(--bone); background: rgba(233,228,216,.05); }

.corner { position: fixed; left: clamp(10px, 3vw, 28px); bottom: clamp(10px, 3vw, 28px); width: 64px; height: 64px; display: grid; place-items: center;
  color: var(--bone); opacity: .55; border-radius: 50%; transition: opacity .3s, background .3s; -webkit-tap-highlight-color: transparent; }
.corner:hover, .corner:focus-visible { opacity: 1; background: rgba(233,228,216,.06); outline: none; }

.vault header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px clamp(16px, 5vw, 60px);
  border-bottom: 1px solid var(--line); font: 400 12px Cinzel, serif; letter-spacing: .4em; text-transform: uppercase; }
.vault nav { display: flex; gap: 24px; }
.vault nav a { text-decoration: none; color: var(--dim); }
.vault nav a:hover { color: var(--bone); }
article { max-width: 760px; margin: 0 auto; padding: 64px 16px 96px; animation: in 1.2s ease; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } }
article h1, article h2 { font-family: Cinzel, serif; font-weight: 400; letter-spacing: .08em; }
article h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
article h2 { font-size: 22px; margin: 48px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
article p, article ul { margin-bottom: 16px; }
article img { max-width: 100%; }