/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.wrapper {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.content {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.hero {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 32px auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.6));
}

h1 {
  font-weight: 800;
  font-size: clamp(32px, 8vw, 72px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
  /* Faux "gothic" vibe without external fonts */
  text-shadow: 0 0 0 #fff, 0 0 18px rgba(255,255,255,.06);
}

.subtle {
  opacity: .85;
}

.footer {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.footer a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  opacity: 0.9;
}

.footer a:hover { opacity: 1; }

.icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background: url('./assets/instagram.svg') no-repeat center / contain;
  filter: invert(1); /* ensures white stroke remains visible on black */
}