*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0d0d0d;
  --glow: rgba(255, 200, 50, 0.18);
  --radius: 18px;
  --shadow: 0 8px 48px rgba(0, 0, 0, 0.7);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background-color: var(--bg);
  font-family: "Outfit", sans-serif;
  min-height: 100dvh;
  overflow: hidden;
}

/* Full-viewport centering */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem;
}

/* Image container */
.frame {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* subtle golden glow */
  filter: drop-shadow(0 0 24px var(--glow));
  transition:
    transform var(--transition),
    filter var(--transition);
}

.frame:hover {
  transform: scale(1.025) translateY(-4px);
  filter: drop-shadow(0 0 42px rgba(255, 200, 50, 0.35));
}

/* The image itself */
.hero-img {
  display: block;
  max-width: min(90vw, 640px);
  max-height: 85dvh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  object-fit: contain;
}