/* 入口。案件を作る頁と同じ組み方を使う。別物に見せない。

   面を重ねず、字の大きさと空きだけで読む順を作る。ここで要るのは
   「メールアドレス」と「パスワード」の二つだけなので、他は置かない。 */

.gate {
  min-height: 100vh;
  /* align-content を置かないと、一枚しかない中身が窓の高さまで引き伸ばされ、
     中の行がその余りを分け合って、欄が異様に高くなる */
  display: grid; justify-items: center; align-content: start;
  background: var(--ground);
}
.gate-sheet {
  width: min(380px, calc(100vw - 40px));
  padding: clamp(48px, 13vh, 132px) 0 72px;
  display: grid; align-content: start;
}
.gate-brand { margin-bottom: clamp(22px, 5vh, 46px); }
/* 見出し帯では幅が惜しくて名前を伏せているが、この頁は一枚まるごと空いている */
.gate-brand .brand-name { display: inline; }
.gate-title { font-size: 25px; font-weight: 600; letter-spacing: .01em; line-height: 1.45; }
.gate-lead { margin-top: 9px; font-size: 13px; line-height: 1.85; color: var(--ink-2); }

.gate-field { margin-top: clamp(20px, 3vh, 30px); font-size: 11.5px; color: var(--ink-3); }
.gate-input { width: 100%; margin-top: 6px; padding: 11px 13px; font-size: 15px; }

/* 断り文句は、その場で読む物。色と太さだけで示し、枠は足さない */
.gate-error { margin-top: 16px; font-size: 12.5px; font-weight: 600;
  color: var(--danger); line-height: 1.7; }
.gate-foot { margin-top: clamp(24px, 4vh, 34px); display: grid; }
.gate-foot .btn { padding: 12px 16px; }