/* The title screen (main._build_title), proportions from its 1280x720 layout. */
.titulus-pagina { background: var(--soot); overflow: hidden; }
.titulus { position: fixed; inset: 0; overflow: hidden; }
.titulus__mundus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.titulus__umbra {
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 118% at 0% 100%, rgb(13 10 8 / 0.88) 0%, rgb(13 10 8 / 0.55) 45%, rgb(13 10 8 / 0) 100%);
}
.titulus__capsa { position: absolute; left: clamp(1.25rem, 5.6vw, 6rem); bottom: clamp(2.5rem, 8.9vh, 6rem); }
.titulus__nomen {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 8.5rem);
  line-height: 1.15;
  color: var(--title-gold);
  text-shadow: var(--outline);
}
.titulus__sub {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--title-cream);
  text-shadow: var(--outline);
}
.titulus__sub { font-size: clamp(1.2rem, 2.5vw, 2.8rem); line-height: 1.3; }
.titulus .capitula { position: absolute; right: 14px; bottom: 14px; max-width: calc(100% - 28px); }
.titulus__notitia {
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  line-height: 1.35;
  color: var(--title-cream);
  text-shadow: var(--outline);
}
.titulus__velum {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  animation: velum-aperit var(--title-fade) both;
}
@keyframes velum-aperit { from { opacity: 1; } to { opacity: 0; } }
/* A phone: the title a third of the way down, the buttons stacked in the lower right corner. */
@media (max-width: 40rem) {
  .titulus__umbra { background: radial-gradient(120% 45% at 0% 36%, rgb(13 10 8 / 0.8) 0%, rgb(13 10 8 / 0.45) 55%, rgb(13 10 8 / 0) 100%); }
  .titulus__capsa { top: 33%; bottom: auto; right: clamp(1.25rem, 5.6vw, 6rem); }
  .titulus .capitula { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .titulus .capitula .scrapum { justify-content: center; }
}