:root {
  --ink: #0b0d11;
  --paper: #ffffff;
  --page-pad: clamp(1.5rem, 6vw, 5rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100svh;

  background-color: #464646;

  /* scrims keep the type readable, photo stays the star */
  background-image:
    linear-gradient(
      to top,
      rgba(11, 13, 17, 0.85) 0%,
      rgba(11, 13, 17, 0.45) 38%,
      rgba(11, 13, 17, 0.1) 70%,
      rgba(11, 13, 17, 0.25) 100%
    ),
    linear-gradient(to right, rgba(11, 13, 17, 0.5) 0%, rgba(11, 13, 17, 0) 55%),
    url("/assets/biggretch.webp");
  background-position: center center, center center, 57% 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* the whole page is the link */
.hero,
.hero:visited,
.hero:hover,
.hero:active {
  display: grid;
  align-content: end;
  justify-items: start;
  min-height: 100svh;
  padding: var(--page-pad);
  padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));

  color: var(--paper);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hero:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: -6px;
}

h1 {
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* fixed backgrounds jank on mobile; keep the crop on the face */
@media only screen and (max-width: 767px) {
  body {
    background-attachment: scroll;
    background-position: center center, center center, 57% 25%;
  }
}