/* Sign-in page layout only. Shared look lives in /brimmd.css. */
.signin{display:grid;gap:var(--s-7) var(--s-9);grid-template-columns:1fr;align-items:start;padding-top:clamp(1.5rem,1rem + 4vw,5rem)}
.signin__intro h1{max-width:14ch}
.signin__card .actions{margin-top:var(--s-4)}
.signin__card #status{margin-top:var(--s-4)}
.signin__aside{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.signin__areas .eyebrow{font-family:var(--font-body)}
.area-list{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-3)}
.area-list li{margin:0}
.area-list a{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4) var(--s-5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:border-color .15s var(--ease)}
.area-list a:hover{border-color:var(--petrol)}
.area-list a .item-title::after{content:" \2192";color:var(--brass-text)}
@media (min-width:60rem){
  .signin{grid-template-columns:1.1fr 1fr}
  .signin__intro{padding-top:var(--s-6)}
  .signin__areas{grid-column:1/-1}
  .area-list{grid-template-columns:repeat(3,1fr)}
}