/* =========================================================
   Sign in (#/signin) · Foundation
   Left: the indigo field with one framed photograph and a card resting across it.
   Right: the cotton field, email first, then one-tap accounts.
   ========================================================= */
.signin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh}
.si-art{display:flex;flex-direction:column;gap:28px;padding:32px 40px 32px;min-height:100vh;position:sticky;top:0;max-height:100vh}
.si-art .mark{height:30px}
.si-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.si-frame{height:min(64vh,620px);aspect-ratio:auto}
.si-frame>img{object-position:50% 55%}
.si-frame::after{background:linear-gradient(0deg,rgba(8,14,40,.45),rgba(8,14,40,0) 32%)}
.si-frame figcaption{left:22px;bottom:18px}
.si-rest{position:absolute;right:-28px;bottom:12%;width:300px;animation-delay:.15s}
.si-rest .rest-title{font-size:16px}
.si-foot{font:500 12.5px/1.5 var(--sans);color:var(--on-band-2)}
.si-main{display:flex;align-items:center;justify-content:center;padding:56px 40px}
.si-in{width:100%;max-width:440px}
.si-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:28px;font:600 13px/1 var(--sans);color:var(--ink-2);text-decoration:none;border-radius:var(--r-s)}
.si-back .ic{width:14px;height:14px;transform:rotate(180deg)}
@media (hover:hover){.si-back:hover{color:var(--ink)}}
.si-in>.cut{color:var(--ink);margin-bottom:18px}
.si-h{font:800 44px/1 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.03em}
.si-in .lede{margin-top:12px;font-size:15px}
.si-form{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.si-sent{margin-top:28px}
.si-sent b{display:block;font-weight:650;color:var(--ink);margin-bottom:2px}
.si-again{margin-top:12px}
.si-or{display:flex;align-items:center;gap:12px;margin:32px 0 14px;font:600 12px/1 var(--sans);letter-spacing:.04em;color:var(--ink-3)}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:var(--rule)}
.si-or::before{flex:0 0 24px}
.si-fine{margin-top:22px;font:400 13px/1.5 var(--sans);color:var(--ink-3)}
@media (max-width:1100px){.si-art{padding:28px 28px}.si-rest{right:-16px;width:270px}.si-main{padding:48px 28px}}
@media (max-width:860px){
  .signin{grid-template-columns:1fr}
  .si-art{position:relative;min-height:0;max-height:none;padding:18px var(--gut) 0;gap:18px}
  .si-art .mark{height:24px}
  .si-stage{flex:none}
  .si-frame{height:200px;border-radius:14px;margin-bottom:-56px}
  .si-rest,.si-foot{display:none}
  .si-main{padding:84px var(--gut) 48px;align-items:flex-start}
  .si-h{font-size:36px}
  .si-back{display:none}
}