/* Vidimus skin. Scoped under .lp--vidimus so it only touches this page; the
   shared landing system it sits on top of is in projects/landing.css, loaded
   first. Vidimus uses the site's default --primary-color, so there's no colour
   override here -- only the bits genuinely unique to this page. */

/* Dictionary entry introducing the app's name. Serif (Tinos, already loaded for
   the wordmark) and a left rule, so it reads as a quoted lexicon entry rather
   than body copy. */
.lp--vidimus .dict {
  margin: 1.4rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--primary-color);
}

.lp--vidimus .dict dt {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--primary-color);
}

.lp--vidimus .dict dt .wordmark {
  font-size: 1.35rem;
  font-weight: 400;
}

.lp--vidimus .dict dt em {
  font-weight: 325;
  opacity: 0.75;
}

.lp--vidimus .dict dd {
  margin-left: 0;
}

.lp--vidimus .dict dd p {
  font-family: 'Tinos', 'Times New Roman', serif;
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.lp--vidimus .dict dd p:last-child {
  margin-bottom: 0;
  font-style: italic;
}

@media (max-width: 720px) {
  /* The auth and about screens both put their point of interest low, so trim
     from the top and show the lower part instead of the landing default's top
     peek. These match on the screenshot filename, so they stay specific to the
     two shots that need it; specificity is high enough to beat the shared
     .lp-shot / .lp-credit phone cuts in landing.css. */
  .lp--vidimus .lp-shot:has(img[src$="auth.webp"]) .phone {
    --phone-cut-top: 11rem;
    --phone-cut-bottom: 0px;
  }

  .lp--vidimus .lp-credit:has(img[src$="about.webp"]) .phone {
    --phone-cut-top: 7rem;
    --phone-cut-bottom: 7rem;
  }
}