@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./instrument-serif-latin-v5.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --background: #11110f;
  --foreground: #eeeae0;
  --line: rgb(238 234 224 / 38%);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  color: var(--foreground);
  background: var(--background);
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

main::before,
main::after {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--line);
}

main::before {
  inset-block: 0;
  left: 7.65vw;
  width: 1px;
}

main::after {
  top: 54.7%;
  left: 7.65vw;
  width: min(61.2vw, 960px);
  height: 1px;
}

h1 {
  position: absolute;
  top: 49%;
  left: 10.85vw;
  max-width: calc(100vw - 14vw);
  margin: 0;
  font-family: "Instrument Serif", "Iowan Old Style", Baskerville, Georgia,
    serif;
  font-size: clamp(3.25rem, 5.9vw, 6.25rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.008em;
  white-space: nowrap;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  main::before {
    left: 8vw;
  }

  main::after {
    top: 72%;
    left: 8vw;
    width: 76vw;
  }

  h1 {
    top: 43%;
    left: 15vw;
    width: 76vw;
    max-width: 76vw;
    font-size: clamp(3.25rem, 15vw, 5.4rem);
    line-height: 0.88;
    text-wrap: balance;
    white-space: normal;
  }
}