/*
  The landing page: a plaster wall, the one lit door, and the facts under it.
  Every colour is a token from base.css.
*/

.hero {
  background: var(--plaster);
  /* The pavement and the lamplight run past the door to both edges of the wall. */
  overflow: hidden;
  overflow: clip;
}

.hero-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

/* Above the door's glow, so lamplight falls on the wall and never on the words. */
.hero-title {
  position: relative;
  z-index: 1;
  max-width: 26rem;
  text-align: center;
}

.hero-title h1 {
  font-size: 3.25rem;
  line-height: 1.05;
  margin: 0 0 1rem;
}

.tagline {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.35;
  margin: 0;
}

/* Balanced, so neither sentence leaves one word alone on a line. */
.tagline span {
  display: block;
  text-wrap: balance;
}

.door {
  display: block;
  width: min(100%, 12.5rem);
  height: auto;
  overflow: visible;
}

.door .lamp {
  fill: var(--lamp);
}

.door .sink {
  fill: var(--paint-sink);
}

.door .lift {
  fill: var(--paint-lift);
}

.door .paint {
  fill: var(--paint-verdigris);
}

.door .brass {
  fill: var(--brass-dim);
}

.door .plinth {
  fill: var(--plaster-shade);
}

.door .pavement {
  fill: var(--pavement);
}

/*
  By day a lamp's light barely shows on a pale wall. At full strength the
  daylight lamp token, a darker amber than the plaster, lays both ladders of
  rings on the wall and the pavement as a brown stain rather than as light, so
  daylight shows them faint. The door, the room, and the lantern stay as drawn.
*/
@media (prefers-color-scheme: light) {
  .brand-door > g.lamp,
  .door > g.lamp {
    opacity: 0.4;
  }
}

/* The door on the left and the name at the far edge of its light, as in the feature graphic. */
@media (min-width: 48rem) {
  .hero-inner {
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-end;
    gap: 4.5rem;
    padding-top: 4rem;
  }

  .hero-title {
    align-self: center;
    max-width: 32rem;
    text-align: left;
    padding-bottom: 2.5rem;
  }

  .hero-title h1 {
    font-size: 4.5rem;
  }

  .tagline {
    font-size: 1.625rem;
  }

  .door {
    width: 17rem;
  }
}

.coming {
  margin-top: 2.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-surface);
}

.coming h2 {
  margin-top: 0;
}

.coming p:last-child {
  margin-bottom: 0;
}