:root {
  --ivory: #f3eee3;
  --muted-ivory: rgba(243, 238, 227, 0.78);
  --ink: #17130f;
}

* { box-sizing: border-box; }

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

body {
  background: #18130f;
  color: var(--ivory);
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

.hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("MinervaForo.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.012);
}

/* A restrained veil: enough contrast for type without flattening the painting. */
.overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 8, 6, 0.48) 0%, rgba(10, 8, 6, 0.16) 31%, rgba(10, 8, 6, 0.00) 57%),
    linear-gradient(0deg, rgba(8, 6, 4, 0.34) 0%, rgba(8, 6, 4, 0.00) 31%);
}

.brand {
  position: absolute;
  top: 43%;
  left: 50%;
  width: min(90vw, 60rem);
  max-width: 60rem;
  transform: translate(-50%, -50%);
  text-align: center;
}

.brand h1 {
  margin: 0;
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  font-size: clamp(2.35rem, 4.2vw, 5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.075em;
  color: var(--ivory);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.34);
}

.brand p {
  margin: 1.05rem 0 0;
  font-size: clamp(0.67rem, 0.75vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--muted-ivory);
}

.contact,
.copyright {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.8rem);
  margin: 0;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.contact {
  right: clamp(1.5rem, 4vw, 4.5rem);
  color: rgba(243, 238, 227, 0.65);
  text-decoration: none;
  transition: opacity 160ms ease;
}

.contact:hover,
.contact:focus-visible {
  opacity: 0.68;
}

.copyright {
  left: clamp(1.5rem, 4vw, 4.5rem);
  color: rgba(243, 238, 227, 0.65);
}

@media (max-width: 700px) {
  .background {
    background-position: 48% center;
  }

  .overlay {
    background:
      linear-gradient(90deg, rgba(10, 8, 6, 0.54) 0%, rgba(10, 8, 6, 0.14) 72%),
      linear-gradient(0deg, rgba(8, 6, 4, 0.48) 0%, rgba(8, 6, 4, 0.00) 43%);
  }

  .brand {
    top: 43%;
    left: 50%;
    right: auto;
    width: calc(100vw - 2.4rem);
    transform: translate(-50%, -50%);
  }

  .brand h1 {
    font-size: clamp(1.65rem, 9vw, 2.7rem);
    letter-spacing: 0.055em;
  }

  .brand p {
    margin-top: 0.85rem;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .contact,
  .copyright {
    bottom: 1.25rem;
    font-size: 0.58rem;
  }

  .contact { right: 1.6rem; }
  .copyright { left: 1.6rem; }
}