/* Home page: the photo fills the screen, "soon..." sits near the bottom. */

@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body.home {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body.home main {
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #000 url("/assets/images/wild-dog-pup-2000.jpg") 65% center / cover no-repeat;
  background-image: image-set(
    url("/assets/images/wild-dog-pup-2000.webp") type("image/webp"),
    url("/assets/images/wild-dog-pup-2000.jpg") type("image/jpeg")
  );
}

/* Tall screens crop the sides; keep the pup's ears in frame. */
@media (orientation: portrait) {
  body.home main {
    background-position: 72% center;
  }
}

body.home h1 {
  margin: 0 0 6vh;
  font-family: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-size: clamp(64px, 14vw, 220px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-text-stroke: 0.04em #000;
  paint-order: stroke fill;
  text-shadow: 0 0 0.08em rgba(0, 0, 0, 0.6);
  user-select: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}