/* The passcode screen. Faces, tokens and reset come from base.css. */

body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--paper)}
.box{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow)}
.box .shot{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 62%}
.box .inner{padding:26px 26px 30px}
.box{width:100%;max-width:400px;text-align:center}
h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,10vw,46px);line-height:1;
  display:flex;flex-direction:column;align-items:center;
  color:var(--parchment)}
h1 .amp{font-style:italic;font-size:.42em;font-weight:400;margin:.06em 0;color:var(--gold)}
.sub{font-family:var(--mono);font-size:10px;color:var(--gold-lit);text-transform:uppercase;
  letter-spacing:.32em;margin:14px 0 30px}

form{position:relative;padding-top:34px}
form::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
label{display:block;font-family:var(--mono);font-size:11px;color:var(--parchment);
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:14px}
input{width:100%;background:var(--sunken);border:1px solid var(--line);color:var(--parchment);
  border-radius:10px;padding:18px 8px;font-family:var(--mono);font-size:28px;font-weight:500;
  text-align:center;letter-spacing:.42em;text-indent:.42em}
input:focus{outline:none;border-color:var(--gold);background:#fff}
button{width:100%;margin-top:20px;background:var(--gold-solid);border:1px solid var(--gold-solid);color:#fffaf2;
  border-radius:99px;padding:17px;font-family:var(--mono);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;cursor:pointer}
button:hover:not(:disabled){background:var(--gold-lit);border-color:var(--gold-lit);color:#fffaf2}
button:disabled{background:transparent;color:var(--dim);border-color:var(--line);cursor:default}
.msg{margin-top:16px;font-size:14px;min-height:20px;line-height:1.5}
.msg.err{color:var(--brick)}
.foot{margin-top:30px;font-family:var(--mono);font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em}
.foot a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--gold)}