* {
  box-sizing:border-box
}
html,body {
  margin:0
}
body {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
h1 {
  margin:0;
  font-weight:400
}
a {
  color:inherit;
  text-decoration:none
}
nav {
  display:flex;
  gap:30px
}
nav a {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font-size:13px
}
nav svg {
  width:17px;
  height:17px
}
a:hover span {
  text-decoration:underline;
  text-underline-offset:5px
}
a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}
body {
  background:#15262b;
  color:#fffaf0
}
main {
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:52px 64px
}
.photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0
}
main:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 55%,rgba(8,17,21,.72));
  z-index:1
}
footer {
  width:100%;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid #fff5;
  padding-top:24px
}
h1 {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:38px;
  font-weight:400;
  letter-spacing:-1px
}
nav a {
  font-size:14px
}
@media(max-width:600px) {
  main {
    padding:28px;
    min-height:100svh
  }
  .photo {
    object-position:68% center
  }
  footer {
    display:block;
    padding-top:20px
  }
  h1 {
    font-size:32px;
    margin-bottom:10px
  }
  nav {
    gap:28px
  }
  main:after {
    background:linear-gradient(transparent 40%,rgba(8,17,21,.85))
  }
}
@media (max-height: 420px) and (orientation: landscape)  {
  main  {
    padding: 20px 28px;
  }
  footer  {
    padding-top: 12px;
  }
}