/* Страница входа. Отдельный файл: разметка в две зоны нужна только здесь,
   держать её в общих компонентах незачем. */
@layer components {
  .login{ display:grid; grid-template-columns:1fr 1fr; min-height:70vh }
  .login__main{ display:grid; place-items:center; padding:var(--sp-9) var(--grid-pad) }
  .login__box{ width:min(400px,100%) }
  .login__mark{ height:34px; width:auto }
  .login__what{ margin-top:var(--sp-2) }
  .login__or{ display:flex; align-items:center; gap:var(--sp-3);
              color:var(--text-faint); font-size:var(--fs-xs) }
  .login__or::before,.login__or::after{ content:""; flex:1; height:1px;
              background:var(--stroke) }

  /* Тот же случай, что и с обложками эпох: под знаком лежит тёмная
     подложка и свечение поверх неё. См. пояснение в play.css. */
  .login__art{ color-scheme:dark;
               position:relative; overflow:hidden; background:var(--art-bg);
               border-left:1px solid var(--stroke) }
  /* Здесь громкая версия знака к месту: соседей у неё нет, а страница
     входа — как раз тот момент, когда бренд должен прозвучать. */
  .login__art{ display:grid; place-items:center; padding:var(--sp-8) }
  .login__logo{ width:min(420px,74%); height:auto; opacity:.92 }
  .login__art::after{ content:""; position:absolute; inset:0;
    background:radial-gradient(70% 60% at 50% 45%,rgba(255,176,32,.05),
                               transparent 62%),
               linear-gradient(90deg,var(--bg-void),transparent 40%) }
  .login__cap{ position:absolute; left:var(--sp-8); bottom:var(--sp-8);
               z-index:2; max-width:34ch }
  .login__cap h2{ font-family:var(--font-display) }

  @media (max-width:860px){
    .login{ grid-template-columns:1fr }
    .login__art{ display:none }
    .login__main{ padding-block:var(--sp-7) }
  }
}