/* The lock page (lock.html). The coming soon hero, smaller, with one password field under it.
   No top bar or footer: every link in them is behind the lock. */
:root{--paper:#fff;}
@font-face{font-family:"Geist Mono";src:url("../../fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block;}

.lk{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px var(--gutter);text-align:center;
}
.lk-field{width:100%;max-width:560px;display:flex;justify-content:center;touch-action:pan-y;}
.lk-field canvas{display:block;}
.lk-field.is-off{min-height:80px;}

.lk-head{
  margin-top:56px;font-family:var(--display);font-weight:400;
  font-size:clamp(32px, 3.2vw, 44px);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  font-feature-settings:"kern","liga","ss01";text-wrap:balance;color:var(--ink);
}
.lk-sub{margin-top:14px;max-width:46ch;font-size:var(--t-body);line-height:var(--lh-body);color:var(--stone);text-wrap:pretty;}

.lk-form{width:100%;max-width:400px;text-align:left;}
.lk-form .field{margin-top:32px;}
.lk-row{display:flex;gap:8px;}
.lk-row .input{flex:1 1 auto;min-width:0;}
.lk-row .btn{height:48px;flex:none;}
.lk-row .btn[disabled]{cursor:progress;opacity:.6;}

@media (max-width:767px){
  .lk{justify-content:flex-start;padding:96px var(--gutter) 64px;}
  .lk-head{margin-top:40px;}
  .lk-row{flex-direction:column;}
  .lk-row .btn{width:100%;}
}