/*
 * Longform Media's front door. One screen, on the logo's own near-black so the
 * artwork sits in its element rather than on a page it has to fight.
 */
body.landing {
  background: #07070d;
  color: #ececec;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing__inner { text-align: center; padding: 2rem 1.5rem; max-width: 520px; }
.landing__mark { width: min(340px, 70vw); height: auto; margin: 0 auto 1.5rem; display: block; }

.landing__name {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* Sized and coloured down rather than given a line of its own: "by Longform
   Media" is an attribution on the name above it, not a second heading. Kept
   unbreakable so a narrow screen wraps before "by" rather than after it. */
.landing__by {
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #9a9a9a;
  white-space: nowrap;
}

.landing__line { margin: 0.6rem 0 2rem; color: #9a9a9a; }

.landing__link a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid #e0a44c;
  border-radius: 6px;
  color: #e0a44c;
  text-decoration: none;
  font-weight: 600;
}

.landing__link a:hover { background: #e0a44c; color: #1a1a1a; }