/* Melly Labs — contact
 * ====================
 *
 * One address, as large as the window will carry, and almost nothing else.
 * A page that says the only thing it is for.
 */

/* start3.css locks the start page to one screen with overflow: hidden. Undoing
   only the horizontal half left the page unscrollable. */
body { height: auto; overflow-y: auto; overflow-x: hidden; }

main {
  position: relative; z-index: 10;
  min-height: 100vh; min-height: 100dvh;
  display: grid; align-content: center;
  padding: calc(var(--edge) * 3) var(--edge);
}

/* The address. Sized against the width of the window so it fills the line at
   any size, and allowed to break after the @ on a narrow screen rather than
   running off the edge. */
.huge {
  display: block;
  font-size: clamp(2.1rem, 9.1vw, 13rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.035em;
  word-break: break-word;
  transition: color .25s ease;
}
.huge span {
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .04em; margin-left: -.04em;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .35s cubic-bezier(.2, .7, .3, 1);
}
.huge:hover span, .huge:focus-visible span { background-size: 100% 100%; }

body.on-green .huge span { background-image: linear-gradient(#fff, #fff); }
body.on-blue .huge span { background-image: linear-gradient(#6a6aff, #6a6aff); }

/* What little else there is. */
.details {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 70px);
  margin-top: clamp(40px, 8vh, 110px);
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 300; line-height: 1.62;
}
.details a { text-decoration: underline; text-underline-offset: .2em; }

@media (prefers-reduced-motion: reduce) {
  .huge span { transition: none; }
}