/* The front page: the approved concept painting, used as the artwork itself.
   Loaded last, so it outranks the notebook skin's #s-title rules in quiz.css.
   The painting is 940 × 1672; the buttons laid over it are placed in its own
   pixels (--x, --y, --w, --h on each), so they stay on their cards at any
   width. Nothing here is filtered or animated. */

#s-title {
  width: min(560px, 100%);
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
#s-title::before, #s-title::after { content: none; }

.cover { position: relative; }
.cover__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(4, 16, 13, 0.55);
}

.cover__at {
  position: absolute;
  left:   calc(var(--x) / 940 * 100%);
  top:    calc(var(--y) / 1672 * 100%);
  width:  calc(var(--w) / 940 * 100%);
  height: calc(var(--h) / 1672 * 100%);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms;
}
.cover__at:hover  { background: rgba(255, 244, 214, 0.12); }
.cover__at:active { background: rgba(40, 24, 8, 0.10); }
.cover__at:focus-visible { outline: 3px dashed var(--notebook-red); outline-offset: 2px; }

/* The welcome sits on the cloth under the painting, so it is lettered in the
   paper's colour rather than the ink's. */
#s-title .hear { margin: 12px 0 0; text-align: center; }
#s-title .hear__btn { color: #ecdcb6; }
#s-title .said {
  margin: 4px auto 18px;
  color: #ecdcb6;
  background: rgba(236, 220, 182, 0.08);
  border-left-color: var(--notebook-gold);
}
#s-title .said__quiet { color: #e7b9a8; }