:root {
  --parchment: #c28b56;
  --ink: #321b11;
  --line: rgba(50, 27, 17, 0.54);
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 18rem;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--parchment);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 226, 177, 0.16), transparent 24rem),
    radial-gradient(circle at 78% 76%, rgba(78, 39, 20, 0.13), transparent 32rem),
    repeating-linear-gradient(0deg, rgba(50, 27, 17, 0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 235, 195, 0.035) 0 1px, transparent 1px 5px);
  font-family: Georgia, "Times New Roman", serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.4;
  background-image: radial-gradient(rgba(50, 27, 17, 0.17) 0.5px, transparent 0.7px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}

body::after {
  background: radial-gradient(ellipse at center, transparent 48%, rgba(50, 27, 17, 0.2) 100%);
}

.landing {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 2rem;
}

.title-lockup {
  position: relative;
  display: grid;
  width: min(100%, 54rem);
  aspect-ratio: 2.15 / 1;
  place-items: center;
  padding: 6%;
  container-type: inline-size;
  isolation: isolate;
  border: 1px solid var(--line);
  outline: 1px solid rgba(50, 27, 17, 0.22);
  outline-offset: 0.55rem;
  animation: settle 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.title-lockup::before,
.title-lockup::after {
  position: absolute;
  z-index: 2;
  width: 1.1rem;
  height: 1.1rem;
  content: "";
  background: var(--parchment);
  border: 1px solid var(--line);
  transform: rotate(45deg);
}

.title-lockup::before {
  top: -0.58rem;
  left: calc(50% - 0.58rem);
}

.title-lockup::after {
  bottom: -0.58rem;
  left: calc(50% - 0.58rem);
}

h1 {
  margin: 0;
  color: var(--ink);
  font-family: "IM FELL English SC", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, calc(19cqw - 1rem), 9.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.035em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0.035em 0.04em 0 rgba(255, 224, 174, 0.2);
  animation: ink-in 650ms 501ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lockup-content {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.title-line {
  display: block;
}

.subtitle {
  margin: clamp(0.4rem, 3.2cqw, 1.5rem) 0 0;
  color: rgba(50, 27, 17, 0.78);
  font-family: "IM FELL English SC", Georgia, "Times New Roman", serif;
  font-size: clamp(0.58rem, 1.85cqw, 0.95rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  animation: subtitle-in 450ms 1152ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.disclaimer {
  position: fixed;
  z-index: 1;
  right: 1.5rem;
  bottom: clamp(1rem, 3vw, 2.2rem);
  left: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
  color: rgba(50, 27, 17, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.62rem, 0.8vw, 0.75rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-align: center;
  text-wrap: balance;
  animation: disclaimer-in 600ms 1603ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(0.75);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ink-in {
  from {
    opacity: 0;
    letter-spacing: 0.15em;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    letter-spacing: 0.035em;
    transform: translateY(0);
  }
}

@keyframes disclaimer-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitle-in {
  from {
    opacity: 0;
    letter-spacing: 0.24em;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    letter-spacing: 0.16em;
    transform: translateY(0);
  }
}

@media (max-width: 34rem) {
  .landing {
    padding: 1.5rem;
  }

  .title-lockup {
    outline-offset: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-lockup,
  h1,
  .subtitle,
  .disclaimer {
    animation: none;
  }
}