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

body {
  font-family: "Alegreya", Georgia, serif;
  background-color: var(--bg-body);
  background-image:
    radial-gradient(
      ellipse at center,
      var(--bg-body-vignette) 0%,
      transparent 70%
    ),
    var(--texture-body), var(--texture-speckle);
  background-size:
    100% 100%,
    512px 512px,
    128px 128px;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--text-primary);
  min-height: 100vh;
}

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

.header {
  text-align: center;
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 9999;
}

.header::before,
.header::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 10%,
    rgba(var(--gold-rgb), 0.3) 35%,
    rgba(var(--gold-rgb), 0.5) 50%,
    rgba(var(--gold-rgb), 0.3) 65%,
    transparent 90%
  );
}

.header::before {
  margin-bottom: 1rem;
}

.header::after {
  margin-top: 0.5rem;
}

.header h1 {
  font-family: "Cinzel", Georgia, serif;
  font-size: 2rem;
  color: var(--gold);
  font-variant: small-caps;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 30px rgba(var(--gold-rgb), 0.25),
    0 2px 4px rgba(var(--shadow-rgb), 0.5);
}

@media (max-width: 768px) {
  .header {
    padding: 0.75rem 0;
    margin-bottom: 1rem;
  }

  .header h1 {
    font-size: 1.4rem;
  }

  .header::before,
  .header::after {
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
  }
}
