@font-face { font-family: "Big Shoulders"; src: url("/assets/fonts/big-shoulders-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --night: #05130D;
  --pitch: #0B2B1E;
  --chalk: #F6F1E4;
  --heart: #FF4B3E;
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--chalk); font: 400 18px/1.5 var(--body); }
img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; }
h1 { font-family: var(--display); font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: .005em; }
:focus-visible { outline: 3px solid var(--heart); outline-offset: 3px; }

/* One screen: the photo, the logo in its dark top band, the message on the grass. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 3vh, 32px) var(--gutter) clamp(24px, 5vh, 56px);
}
.hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,19,13,.45) 0, rgba(5,19,13,0) 18%, rgba(5,19,13,0) 66%, rgba(5,19,13,.82) 100%);
}
.hero__logo { width: clamp(130px, min(15vw, 24vh), 260px); }
.hero__copy { align-self: flex-end; max-width: 100%; text-align: right; }
.hero h1 { font-size: clamp(40px, min(6.2vw, 11.5vh), 124px); white-space: nowrap; }
.hero p { max-width: min(46vw, 34em); margin: 12px 0 0 auto; font-size: clamp(15px, 1.35vw, 22px); line-height: 1.4; font-weight: 500; text-wrap: balance; }

/* Tall screens: the copy sits above the photo, which fades up into the page colour. */
@media (max-aspect-ratio: 5/4) {
  .hero { --art: 150; }
  .hero::after { display: none; }
  .hero__art {
    inset: auto auto 0 calc(50% - var(--art) * .37%);
    width: calc(var(--art) * 1%); height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  }
  .hero { justify-content: flex-start; gap: clamp(24px, 4vh, 40px); padding-top: clamp(20px, 5vh, 56px); padding-bottom: calc(var(--art) * .558vw * .9); }
  .hero__copy { align-self: flex-start; text-align: left; }
  .hero h1 { font-size: clamp(40px, 13.4vw, 124px); }
  .hero p { max-width: 26em; margin-left: 0; font-size: clamp(18px, 2.4vw, 22px); }
  .hero__logo { width: clamp(190px, 30vw, 280px); }
}

@media (max-width: 620px) {
  .hero { --art: 190; }
}

/* 404 */
.lost { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; padding-inline: var(--gutter); background: var(--pitch); }
.lost h1 { font-size: clamp(60px, 11vw, 150px); }
.btn {
  display: inline-block; padding: 16px 26px 15px; background: var(--heart); color: var(--night);
  font: 900 23px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  border: 2px solid var(--heart);
}
.btn:hover { background: var(--chalk); border-color: var(--chalk); }