:root {
  color-scheme: dark;
}

@font-face {
  font-family: "Cochin";
  src: url("assets/fonts/Cochin.ttf") format("truetype");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #0b0908;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
}

.hero__video,
.hero__overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__video {
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 3, 3, 0.75) 0%, rgba(7, 5, 4, 0.38) 43%, rgba(6, 4, 4, 0.24) 100%),
    linear-gradient(0deg, rgba(3, 2, 2, 0.8) 0%, rgba(7, 5, 4, 0.2) 48%, rgba(5, 4, 3, 0.26) 100%);
}

.hero__content {
  display: flex;
  width: min(100%, 1120px);
  min-height: 100%;
  padding: clamp(32px, 6vw, 88px) 32px clamp(42px, 5.5vh, 64px);
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}

.hero__logo {
  display: block;
  width: min(100%, 366px);
  height: auto;
  margin-bottom: clamp(26px, 2.1vw, 40px);
  user-select: none;
}

.hero__statement {
  max-width: 950px;
  margin: 0;
  color: #f8f1df;
  font-family: "Cochin", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.16;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__statement span {
  display: block;
}

.hero__pattern {
  display: block;
  width: auto;
  height: 40px;
  margin-top: clamp(28px, 2.1vw, 40px);
  user-select: none;
}

@media (max-width: 700px) {
  .hero__content {
    width: 100%;
    padding: 28px 20px max(42px, env(safe-area-inset-bottom));
  }

  .hero__logo {
    width: min(100%, 300px);
    margin-bottom: 28px;
  }

  .hero__pattern {
    width: auto;
    height: 40px;
    margin-top: 30px;
  }
}

@media (max-height: 620px) and (min-width: 701px) {
  .hero__content {
    padding-bottom: 38px;
  }

  .hero__logo {
    width: min(100%, 366px);
    margin-bottom: 20px;
  }

  .hero__statement {
    font-size: 20px;
  }

  .hero__pattern {
    width: auto;
    height: 40px;
    margin-top: 20px;
  }
}