:root {
  --ink: #211f1b;
  --paper: #e9e5dc;
  --accent: #b84c31;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
}

.canvas {
  min-height: 100svh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.canvas::before {
  content: "";
  position: absolute;
  width: min(68vw, 780px);
  height: min(68vw, 780px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.65), rgba(255,255,255,0) 68%);
  transform: translate(14%, 2%);
  z-index: -1;
}

.canvas::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(33, 31, 27, .14);
  pointer-events: none;
  z-index: 3;
}

h1 {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 5%;
  margin: 0;
  transform: translateY(-50%);
  color: var(--ink);
  font-size: clamp(78px, 16vw, 250px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.105em;
  white-space: nowrap;
  pointer-events: none;
}

h1 span { color: var(--accent); }

.statue-wrap {
  width: min(82vw, 900px);
  height: calc(100svh - clamp(150px, 23vw, 315px));
  min-height: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: end;
  transform: translateX(9%);
}

.statue-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 22px rgba(64, 45, 32, .16));
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.statue-wrap:hover img { transform: scale(1.018) translateY(-5px); }

@media (max-width: 700px) {
  .canvas::after { inset: 12px; }
  .canvas::before { width: 110vw; height: 110vw; transform: translate(6%, -6%); }
  h1 { top: 10%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(58px, 18vw, 130px); }
  .statue-wrap { width: 112vw; height: calc(100svh - 135px); transform: translateX(7%) translateY(calc(-12% + 25px)); }
}
