:root {
  --bg: #151518;
  --bg-soft: #1f2024;
  --text: #cad5e4;
  --text-muted: #acb6c7;
  --blue: #1c2964;
  --blue-bright: #0d3685;
  --earth: #8c5e36;
  --warm: #e68f72;
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--bg);
  background: var(--warm);
}

.page {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 4.5rem);
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(230, 143, 114, 0.12), transparent 18rem),
    radial-gradient(circle at 18% 82%, rgba(13, 54, 133, 0.34), transparent 24rem),
    linear-gradient(130deg, var(--bg) 0%, var(--bg-soft) 54%, #101114 100%);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(202, 213, 228, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 213, 228, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, transparent 0 26%, rgba(21, 21, 24, 0.58) 71%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  mix-blend-mode: screen;
}

.photo-layer {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.72) contrast(1.04);
}

.photo-layer--tree {
  inset: -8%;
  opacity: 0.14;
  background-image:
    linear-gradient(90deg, rgba(21, 21, 24, 0.15), rgba(21, 21, 24, 0.72)),
    url("images/GoHwQw5fu40-0y_I51suB25d6r1hNAwhN_WTP_ajTyTphuhXR_wzb9dYGFckZoO0JBXLRg.jpg");
  background-position: center;
  mix-blend-mode: screen;
}

.photo-layer--grass {
  right: -7vw;
  bottom: -13vh;
  width: min(44rem, 56vw);
  height: min(34rem, 48vh);
  opacity: 0.16;
  background-image:
    linear-gradient(180deg, rgba(21, 21, 24, 0.06), rgba(21, 21, 24, 0.88)),
    url("images/sO0F5Ot_JTdnRyT3FLqi8MAmOB3_2dLNpl-TzGmBh1qhlIr9lzB6rhUgYfQ-1ynhegwCfA.jpg");
  background-position: center 58%;
  clip-path: polygon(16% 0, 100% 10%, 86% 100%, 0 84%);
  mix-blend-mode: soft-light;
}

.photo-layer--volcano {
  top: 10vh;
  right: 8vw;
  width: min(23rem, 30vw);
  height: min(23rem, 30vw);
  opacity: 0.2;
  background-image:
    radial-gradient(circle, rgba(230, 143, 114, 0.14), rgba(21, 21, 24, 0.82) 68%),
    url("images/6W8zhEB-Pigo3EAEdepPrdM-PY5vpDIfuaEzV6kXO8d_HpqK140jC8OTK8H-gCeXsTv2ryBx.jpg");
  background-position: 50% 48%;
  border-radius: 50%;
  mix-blend-mode: lighten;
}

.photo-layer--road {
  left: -10vw;
  bottom: -10vh;
  width: min(42rem, 54vw);
  height: min(30rem, 42vh);
  opacity: 0.15;
  background-image:
    linear-gradient(130deg, rgba(28, 41, 100, 0.6), rgba(21, 21, 24, 0.84)),
    url("images/HGRI96xytUnx1z-85lh77WiwFJKGhc_IG6E7RPSIArjYQ0lDNXeRKYoAU21Hpi44pcmGMgo-.jpg");
  background-position: 42% 56%;
  clip-path: polygon(0 22%, 100% 0, 86% 100%, 5% 92%);
  mix-blend-mode: screen;
}

.typefield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.typefield::before {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 8vw, 8rem);
  bottom: clamp(3.5rem, 11vh, 7rem);
  width: min(31rem, 37vw);
  height: clamp(4.25rem, 9vh, 6.6rem);
  opacity: 0.16;
  background-image:
    linear-gradient(90deg, rgba(21, 21, 24, 0.28), rgba(202, 213, 228, 0.04), rgba(21, 21, 24, 0.68)),
    url("images/sO0F5Ot_JTdnRyT3FLqi8MAmOB3_2dLNpl-TzGmBh1qhlIr9lzB6rhUgYfQ-1ynhegwCfA.jpg");
  background-position: center 58%;
  background-size: cover;
  clip-path: polygon(0 28%, 100% 8%, 91% 78%, 8% 100%);
  filter: saturate(0.76) contrast(1.08) brightness(0.82);
  mix-blend-mode: screen;
}

.type-line {
  position: absolute;
  left: 50%;
  width: max-content;
  margin: 0;
  white-space: nowrap;
  color: rgba(202, 213, 228, 0.055);
  font-size: clamp(2.1rem, 5.4vw, 6.7rem);
  font-weight: 780;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.type-line--01 {
  top: 3.5vh;
  transform: translateX(-49%);
  opacity: 0.38;
}

.type-line--02 {
  top: 16vh;
  color: rgba(202, 213, 228, 0.058);
  animation: drift-left 42s linear infinite;
}

.type-line--03 {
  top: 29vh;
  color: rgba(183, 197, 216, 0.048);
  transform: translateX(-54%) scaleX(1.08);
  transform-origin: center;
}

.type-line--04 {
  top: 43vh;
  color: rgba(202, 213, 228, 0.055);
  transform: translateX(-46%) rotate(-1.2deg);
}

.type-line--04 span {
  position: relative;
  display: inline-block;
  color: rgba(230, 143, 114, 0.26);
  transform: translateY(0.07em) rotate(2.5deg);
}

.type-line--04 span::after {
  content: "";
  position: absolute;
  right: -0.31em;
  bottom: -0.18em;
  width: 0.46em;
  height: 0.46em;
  border: 0.045em solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  opacity: 0.36;
}

.type-line--05 {
  top: 57vh;
  color: rgba(202, 213, 228, 0.044);
  transform: translateX(-57%) skewX(-4deg);
}

.type-line--06 {
  top: 70vh;
  color: rgba(172, 182, 199, 0.05);
  animation: drift-right 52s linear infinite;
}

.type-line--07 {
  top: 83vh;
  color: rgba(202, 213, 228, 0.048);
  transform: translateX(-43%) scaleX(0.94);
}

.type-orbit {
  position: absolute;
  top: clamp(1.25rem, 7vh, 5rem);
  right: clamp(0.75rem, 7vw, 7rem);
  width: clamp(11rem, 23vw, 23rem);
  height: clamp(11rem, 23vw, 23rem);
  overflow: visible;
  opacity: 0.32;
  animation: slow-spin 86s linear infinite;
}

.type-orbit text {
  fill: rgba(230, 143, 114, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.type-wave {
  position: absolute;
  left: -4vw;
  right: -4vw;
  bottom: 5vh;
  width: 108vw;
  height: clamp(7.5rem, 18vh, 13rem);
  overflow: visible;
  opacity: 0.34;
}

.type-wave text {
  fill: rgba(202, 213, 228, 0.074);
  font-size: 74px;
  font-weight: 780;
  letter-spacing: -0.04em;
}

.type-hook {
  position: absolute;
  left: -2vw;
  top: 50vh;
  width: 82vw;
  height: clamp(8rem, 14vh, 11rem);
  overflow: visible;
  opacity: 0.48;
}

.type-hook path {
  fill: none;
}

.type-hook text {
  fill: rgba(230, 143, 114, 0.52);
  font-size: 58px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.hero {
  position: relative;
  z-index: 3;
  align-self: center;
  width: min(100%, 78rem);
  margin: auto 0;
  padding-top: clamp(1rem, 2vh, 2rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -6vh -8vw -6vh -5vw;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 34% 50%, rgba(21, 21, 24, 0.72), rgba(21, 21, 24, 0.34) 48%, transparent 72%);
}

.hero-title {
  max-width: 12.6em;
  margin: 0;
  color: var(--text);
  font-size: clamp(4rem, 9.4vw, 9.8rem);
  font-weight: 810;
  line-height: 0.9;
  letter-spacing: -0.047em;
  text-wrap: balance;
  text-shadow:
    0 0 24px rgba(21, 21, 24, 0.7),
    0 2rem 5rem rgba(0, 0, 0, 0.32);
}

.hero-title span {
  display: block;
}

.hero-title span:nth-child(3) {
  color: rgba(202, 213, 228, 0.92);
}

.hero-title span:nth-child(4) {
  color: #d7e0ed;
}

.hero-title span:nth-child(4)::after {
  content: "";
  display: inline-block;
  width: 0.12em;
  height: 0.12em;
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 1.2em rgba(230, 143, 114, 0.82);
  transform: translateY(-0.32em);
}

.hero-mark {
  position: absolute;
  right: 0;
  bottom: 0.2em;
  display: flex;
  align-items: end;
  gap: clamp(0.7rem, 1.4vw, 1rem);
}

.hero-avatar {
  display: block;
  width: clamp(3.5rem, 5.2vw, 5.5rem);
  height: clamp(3.5rem, 5.2vw, 5.5rem);
  object-fit: cover;
  border: 1px solid rgba(202, 213, 228, 0.18);
  border-radius: 50%;
  background: var(--bg-soft);
  box-shadow:
    0 0 0 0.42rem rgba(21, 21, 24, 0.62),
    0 0 0 0.48rem rgba(230, 143, 114, 0.13),
    0 1.1rem 2.8rem rgba(0, 0, 0, 0.4);
  filter: saturate(0.64) contrast(0.94) brightness(0.76) sepia(0.08);
  opacity: 0.88;
}

.hero-meta {
  display: grid;
  gap: 0.48rem;
  margin: 0;
  color: rgba(202, 213, 228, 0.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.92rem, 1.35vw, 1.18rem);
  font-weight: 620;
  letter-spacing: 0.1em;
  line-height: 1.24;
  text-align: right;
  text-transform: lowercase;
}

.hero-meta::before {
  content: "";
  justify-self: end;
  width: clamp(4rem, 9vw, 8rem);
  height: 1px;
  margin-bottom: 0.55rem;
  background: linear-gradient(90deg, transparent, var(--warm));
  opacity: 0.9;
}

.hero-meta span {
  display: block;
}

@keyframes drift-left {
  0% {
    transform: translateX(-42%);
  }

  50% {
    transform: translateX(-54%);
  }

  100% {
    transform: translateX(-42%);
  }
}

@keyframes drift-right {
  0% {
    transform: translateX(-58%);
  }

  50% {
    transform: translateX(-46%);
  }

  100% {
    transform: translateX(-58%);
  }
}

@keyframes slow-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .page {
    padding: 1.15rem;
  }

  .photo-layer--tree {
    opacity: 0.15;
    background-position: 55% center;
  }

  .photo-layer--grass,
  .photo-layer--road {
    width: 86vw;
    height: 36vh;
  }

  .photo-layer--volcano {
    top: 10vh;
    right: -16vw;
    width: 62vw;
    height: 62vw;
    opacity: 0.17;
  }

  .type-line {
    font-size: clamp(2.15rem, 13vw, 5rem);
    letter-spacing: -0.045em;
  }

  .typefield::before {
    left: 8vw;
    bottom: 21vh;
    width: 68vw;
    height: 4rem;
    opacity: 0.11;
  }

  .type-line--01,
  .type-line--03,
  .type-line--07 {
    display: none;
  }

  .type-line--02 {
    top: 9vh;
  }

  .type-line--04 {
    top: 37vh;
  }

  .type-line--05 {
    top: 64vh;
  }

  .type-line--06 {
    top: 79vh;
  }

  .type-orbit {
    top: auto;
    right: -4.8rem;
    bottom: 2.4rem;
    width: 14rem;
    height: 14rem;
    opacity: 0.24;
  }

  .type-wave {
    bottom: 14vh;
    opacity: 0.2;
  }

  .type-hook {
    left: -8vw;
    top: 55vh;
    width: 108vw;
    height: 7.5rem;
    opacity: 0.3;
  }

  .type-hook text {
    font-size: 37px;
    letter-spacing: 0;
  }

  .hero {
    align-self: center;
    padding: 0 0 5.5rem;
  }

  .hero-title {
    max-width: 8.2em;
    font-size: clamp(3.8rem, 16vw, 6.2rem);
    line-height: 0.92;
    letter-spacing: -0.052em;
  }

  .hero-title span:nth-child(3) {
    max-width: 8em;
  }

  .hero-mark {
    right: auto;
    bottom: 0;
    left: 0.15rem;
    align-items: end;
    flex-direction: row-reverse;
  }

  .hero-avatar {
    width: 3.5rem;
    height: 3.5rem;
    box-shadow:
      0 0 0 0.34rem rgba(21, 21, 24, 0.64),
      0 0 0 0.39rem rgba(230, 143, 114, 0.12),
      0 0.8rem 2rem rgba(0, 0, 0, 0.36);
  }

  .hero-meta {
    font-size: clamp(0.84rem, 3.2vw, 1rem);
    text-align: left;
  }

  .hero-meta::before {
    justify-self: start;
    background: linear-gradient(90deg, var(--warm), transparent);
  }
}

@media (max-width: 420px) {
  .hero-title {
    font-size: clamp(3.3rem, 16vw, 4.35rem);
  }

  .hero-meta {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .type-hook {
    display: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}