:root {
  --ivory: #f4efe6;
  --ivory-deep: #e7ddcf;
  --navy: #132740;
  --gold: #c6a057;
  --text: #22364e;
  --muted: #5d6b78;
  --hero-border: rgba(255, 255, 255, 0.88);
  --shadow: 0 16px 42px rgba(17, 35, 59, 0.07);
  --title-font: "Bookman Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --copy-font: "Hoefler Text", "Iowan Old Style", Baskerville, "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  background-color: var(--ivory);
  background-image:
    radial-gradient(1200px 700px at 12% 8%, rgba(255,255,255,0.40), transparent 58%),
    radial-gradient(900px 580px at 82% 76%, rgba(255,255,255,0.20), transparent 64%),
    radial-gradient(240px 150px at 18% 26%, rgba(130, 108, 78, 0.04), transparent 72%),
    radial-gradient(200px 130px at 80% 18%, rgba(123, 100, 72, 0.035), transparent 72%),
    radial-gradient(220px 140px at 66% 50%, rgba(123, 100, 72, 0.03), transparent 74%),
    linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.20) 0 38px,
      rgba(219, 209, 193, 0.23) 38px 40px,
      rgba(255,255,255,0.12) 40px 86px,
      rgba(205, 193, 174, 0.19) 86px 88px,
      rgba(255,255,255,0.10) 88px 136px,
      rgba(214, 203, 185, 0.20) 136px 139px,
      rgba(255,255,255,0.13) 139px 188px,
      rgba(197, 186, 168, 0.18) 188px 190px,
      rgba(255,255,255,0.10) 190px 238px
    );
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 18%, transparent 34%),
    linear-gradient(90deg, transparent 0%, rgba(17,35,59,0.025) 24%, transparent 44%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 64%, rgba(17,35,59,0.05) 0 0.8px, transparent 1.4px);
  background-size: 420px 100%, 580px 100%, 26px 26px, 31px 31px;
  background-position: 0 0, 140px 0, 0 0, 0 0;
  mix-blend-mode: soft-light;
}

img {
  display: block;
  max-width: 100%;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.hero {
  width: min(100%, 1140px);
  border: 1px solid var(--hero-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.73));
  box-shadow: var(--shadow);
}

.hero__inner {
  padding: clamp(1.8rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
  text-align: center;
}

.hero__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 960px);
  margin: 0 auto 1.2rem;
  object-fit: contain;
}

.hero__title {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(2.45rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
}

.hero__copy {
  margin: 0.9rem auto 0;
  max-width: 30ch;
  font-family: var(--copy-font);
  font-style: italic;
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 760px) {
  .page {
    padding: 1rem;
  }

  .hero__logo {
    margin-bottom: 0.95rem;
  }

  .hero__copy {
    max-width: 25ch;
  }
}