/* ==========================================================================
   Miseojeoplus — auth pages (register / login) + OTP modal
   ========================================================================== */

.auth{padding:40px 0 72px}
.auth__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start}
.auth__grid--narrow{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)}

/* ---------- form card ---------- */
.card{border:3px solid var(--ink);background:var(--paper);padding:28px 30px 30px}
.card__head{border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:22px}
.card h1{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,52px);line-height:.88;letter-spacing:-.015em;margin-top:6px;
}
.card__sub{font-size:15.5px;line-height:1.45;color:var(--grey-d);margin-top:10px}

.field{margin-bottom:18px}
.field > label{
  display:block;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.19em;
  text-transform:uppercase;margin-bottom:6px;
}
.field input[type="text"],.field input[type="email"],.field input[type="password"]{
  width:100%;background:#FBFAF7;border:2px solid var(--ink);border-radius:0;
  padding:12px 13px 11px;font-size:16.5px;font-family:var(--text);
}
.field input::placeholder{color:var(--grey);opacity:1}
.field input:focus{outline:3px solid var(--crimson);outline-offset:0;border-color:var(--crimson)}
.field .hint{display:block;margin-top:6px;font-size:12.5px;color:var(--grey-d)}
.field .err{
  display:none;margin-top:6px;font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);
}
.field.invalid input{border-color:var(--crimson);background:#FBEDEF}
.field.invalid .err{display:block}

.field--check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin:22px 0 20px}
.field--check input{
  appearance:none;-webkit-appearance:none;margin:2px 0 0;width:22px;height:22px;flex:0 0 auto;
  border:2px solid var(--ink);background:#FBFAF7;border-radius:0;position:relative;cursor:pointer;
}
.field--check input:checked{background:var(--crimson);border-color:var(--crimson)}
.field--check input:checked::after{
  content:"";position:absolute;left:4px;top:4px;width:11px;height:6px;
  border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:rotate(-45deg);
}
.field--check label{
  font-family:var(--text);font-weight:400;font-size:14.5px;line-height:1.42;
  letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:0;
}
.field--check .err{grid-column:2}
.field--check.invalid input{border-color:var(--crimson)}

.card__foot{margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
.card__alt{
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.13em;text-transform:uppercase;
}
.card__alt a{color:var(--crimson);text-decoration:none;border-bottom:2px solid var(--crimson)}
.card__legal{margin-top:12px;font-size:12px;line-height:1.45;color:var(--grey-d)}

/* ---------- aside ---------- */
.aside__kicker{margin-bottom:12px}
.aside h2,.slab h2{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.2vw,50px);line-height:.88;letter-spacing:-.015em;
}
.aside h2 em,.slab h2 em{font-style:normal;color:var(--crimson)}
.aside p,.slab p{font-size:18px;line-height:1.42;margin-top:16px;max-width:34em}
.aside p{color:var(--ink-2)}
.aside__fig{position:relative;border:6px solid var(--ink);margin-top:26px;max-width:430px}
.aside__fig img{width:100%}
.aside__fig .stamp{position:absolute;top:-18px;right:-20px;background:var(--paper);z-index:2}
.aside__list{margin-top:26px;border-top:3px solid var(--ink)}
.aside__list li{
  border-bottom:1px solid var(--rule);padding:13px 0;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;
}
.aside__list .n{
  font-family:var(--disp);font-weight:900;font-size:26px;color:var(--crimson);line-height:1;
  font-variant-numeric:tabular-nums;
}
.aside__list p{font-size:15.5px;line-height:1.4;margin:0;color:var(--ink-2)}

/* ink slab used on the login aside */
.slab{background:var(--ink);color:var(--paper);padding:32px 30px 30px;margin-top:0}
.slab h2{color:var(--paper)}
.slab h2 em{color:var(--crimson-lt)}
.slab p{color:#CFCAC1}
.slab .kicker{color:var(--crimson-lt)}
.slab__stats{margin-top:28px;border-top:1px solid #3a3a3a}
.slab__stats li{border-bottom:1px solid #3a3a3a;padding:14px 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.slab__stats .fig{
  font-family:var(--disp);font-weight:900;font-size:34px;line-height:.9;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.slab__stats .lbl{
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#B9B4AB;text-align:right;
}
.slab__foot{
  margin-top:18px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#8A857D;
}

/* ==========================================================================
   OTP MODAL
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(17,17,17,.88);
}
.modal.open{display:flex}
.modal__card{
  background:var(--paper);border:3px solid var(--ink);max-width:500px;width:100%;
  padding:26px 28px 26px;position:relative;
}
.modal__card h2{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:40px;line-height:.9;letter-spacing:-.015em;margin-top:6px;
}
.modal__sub{font-size:15.5px;line-height:1.45;margin-top:12px;color:var(--ink-2)}
.modal__sub b{font-weight:600;border-bottom:2px solid var(--crimson)}
.otp{display:flex;gap:9px;margin:22px 0 6px}
.otp input{
  flex:1 1 0;min-width:0;height:62px;text-align:center;background:#FBFAF7;
  border:2px solid var(--ink);border-radius:0;
  font-family:var(--disp);font-weight:900;font-size:30px;font-variant-numeric:tabular-nums;
  padding:0;
}
.otp input:focus{outline:3px solid var(--crimson);border-color:var(--crimson)}
.modal__actions{display:flex;gap:12px;margin-top:20px}
.modal__actions .btn{flex:1 1 auto;text-align:center}
.modal__foot{
  margin-top:16px;border-top:1px solid var(--rule);padding-top:12px;display:flex;
  flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:center;
}
.modal__resend{
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--crimson);text-decoration:none;border-bottom:2px solid var(--crimson);
}
.modal__close{
  position:absolute;top:-3px;right:-3px;width:38px;height:38px;background:var(--ink);color:var(--paper);
  font-family:var(--disp);font-weight:800;font-size:20px;line-height:1;
}
.modal__close:hover{background:var(--crimson)}

@media (max-width:1000px){
  .auth__grid,.auth__grid--narrow{grid-template-columns:1fr;gap:40px}
  .auth__aside{order:-1}
  .auth__grid--narrow .auth__aside{order:0}   /* login: form first on small screens */
}
@media (max-width:720px){
  .auth{padding:26px 0 52px}
  .card{padding:22px 20px 24px}
  .modal__card{padding:22px 18px}
  .modal__card h2{font-size:32px}
  .otp{gap:6px}
  .otp input{height:54px;font-size:26px}
  .modal__actions{flex-direction:column}
  .slab{padding:26px 20px}
}