@import url("../shared.css");

body.cover { display: flex; min-height: 100vh; flex-direction: column; }
body.cover header { padding: 70px 20px 0; }
body.cover header h1 { font-size: clamp(56px, 12vw, 128px); }
body.cover .release {
  margin: 22px 0 0; color: #888; font-size: 14px;
  letter-spacing: .3em; text-transform: uppercase;
}
main.cover { display: flex; flex: 1; align-items: center; justify-content: center; padding: 40px 20px 90px; }
.enter { display: inline-block; color: var(--ink); text-align: center; text-decoration: none; }
.enter img {
  display: block; width: min(460px, 78vw); height: auto; margin: 0 auto;
  mix-blend-mode: multiply; user-select: none; -webkit-user-drag: none;
}
.enter-hint {
  display: block; margin-top: 34px; color: #aaa; font-size: 14px;
  letter-spacing: .4em; opacity: 0; text-transform: uppercase; transition: opacity .4s ease;
}
.enter:hover .enter-hint { opacity: 1; }
@media (hover: none) { .enter-hint { opacity: .8; } }
@media (max-width: 600px) {
  body.cover header { padding: 52px 18px 0; }
  body.cover header h1 { font-size: clamp(42px, 12vw, 128px); }
  body.cover .release { margin-top: 16px; font-size: 12px; letter-spacing: .22em; }
  main.cover { padding: 24px 18px 56px; }
  .enter-hint { margin-top: 26px; font-size: 12px; letter-spacing: .3em; }
}