:root {
  --bg: #ece9e1;
  --ink: #222327;
  --muted: #7d7f84;
  --line: #d0d2d7;
  --page-gutter: clamp(64px, 7vw, 108px);
  --column-gap: clamp(24px, 3vw, 48px);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Caveat", cursive;
  color: var(--ink);
  background: var(--bg);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.36;
  background:
    radial-gradient(140% 80% at 10% 8%, rgba(255, 255, 255, 0.7) 0, transparent 64%),
    radial-gradient(120% 88% at 92% 84%, rgba(26, 20, 10, 0.1) 0, transparent 68%),
    repeating-linear-gradient(
      36deg,
      rgba(255, 255, 255, 0.1) 0 2px,
      rgba(127, 113, 93, 0.05) 2px 6px
    ),
    repeating-linear-gradient(
      -42deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      rgba(126, 111, 87, 0.04) 1px 5px
    );
  filter: contrast(1.03);
}

body::after {
  content: "";
  position: fixed;
  inset: -40%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.26;
  background:
    linear-gradient(
      112deg,
      transparent 32%,
      rgba(255, 255, 255, 0.52) 48%,
      rgba(255, 255, 255, 0.2) 54%,
      transparent 67%
    );
  filter: blur(28px);
  transform: translate3d(-42%, -6%, 0);
  animation: windowLight 22s ease-in-out infinite;
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--column-gap);
  padding-inline: var(--page-gutter);
  align-items: stretch;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px 0 64px;
  padding-left: clamp(28px, 4vw, 72px);
}

.intro {
  position: relative;
}

.intro h1 {
  margin: 0;
  font-size: clamp(5.8rem, 13.5vw, 12rem);
  line-height: 0.86;
  letter-spacing: 0;
  font-family: "Caveat", cursive;
  font-weight: 700;
}

.intro p {
  margin: 8px 0 0;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  color: #2f3136;
}

.portrait-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.portrait-wrap img {
  width: min(100%, 900px);
  height: min(92vh, 920px);
  object-fit: contain;
  object-position: center center;
  filter: grayscale(100%) contrast(1.04);
}

@keyframes windowLight {
  0% {
    transform: translate3d(-42%, -6%, 0);
    opacity: 0.17;
  }
  52% {
    transform: translate3d(3%, 0, 0);
    opacity: 0.28;
  }
  100% {
    transform: translate3d(12%, 5%, 0);
    opacity: 0.15;
  }
}

@media (max-width: 1024px) {
  .hero {
    display: block;
    min-height: 100svh;
    padding-inline: clamp(20px, 4.5vw, 44px);
    padding-bottom: 22px;
    position: relative;
    overflow: hidden;
  }

  .content {
    position: absolute;
    left: clamp(18px, 7vw, 86px);
    top: clamp(70px, 13vh, 150px);
    z-index: 2;
    width: clamp(280px, 45vw, 460px);
    padding: 0;
    text-align: left;
  }

  .intro {
    margin: 0;
  }

  .intro h1 {
    font-size: clamp(5.2rem, 14vw, 8.6rem);
    line-height: 0.84;
  }

  .intro p {
    margin-top: 0;
    font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  }

  .portrait-wrap {
    position: absolute;
    right: clamp(-120px, -9vw, -30px);
    bottom: clamp(34px, 8vh, 96px);
    z-index: 3;
    width: clamp(420px, 68vw, 760px);
    min-height: auto;
    padding: 0;
  }

  .portrait-wrap img {
    width: 100%;
    height: auto;
    max-height: 75svh;
    object-fit: contain;
  }

  body::after {
    opacity: 0.18;
    filter: blur(20px);
    animation-duration: 26s;
  }
}

@media (max-width: 760px) {
  .content {
    left: 50%;
    top: clamp(86px, 16vh, 190px);
    width: min(86vw, 470px);
    transform: translateX(-50%);
    text-align: center;
  }

  .intro h1 {
    font-size: clamp(6.2rem, 28vw, 9.2rem);
  }

  .intro p {
    font-size: clamp(2.6rem, 12vw, 4.1rem);
  }

  .portrait-wrap {
    right: clamp(-120px, -14vw, -40px);
    bottom: clamp(24px, 6vh, 74px);
    width: min(108vw, 520px);
  }

  .portrait-wrap img {
    max-height: 69svh;
  }
}

@media (max-width: 430px) {
  .content {
    top: clamp(56px, 10vh, 100px);
    width: min(90vw, 380px);
  }

  .portrait-wrap {
    right: clamp(-132px, -18vw, -62px);
    width: min(118vw, 510px);
  }
}