:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #eef0f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1;
  place-items: center;
  overflow: hidden;
  padding: 4rem 1.5rem 3rem;
  background: radial-gradient(ellipse at 50% 35%, #182244 0%, #0e152b 38%, #0b1020 77%);
}
.ambient { position: absolute; z-index: -1; width: 36rem; height: 36rem; border-radius: 50%; filter: blur(65px); opacity: .2; }
.ambient--one { background: #3b57ac; top: -24rem; right: -17rem; }
.ambient--two { background: #715b9d; bottom: -28rem; left: -18rem; }
.hero { width: min(100%, 42rem); text-align: center; }
.monogram {
  display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin: 0 auto 2rem;
  border: 1px solid rgba(213,187,141,.55); border-radius: 50%;
  font: 2rem/1 Georgia, "Times New Roman", serif; color: #d8bd8a;
  box-shadow: 0 0 35px rgba(207,183,141,.07), inset 0 0 25px rgba(207,183,141,.05);
}
.eyebrow, .announcement { letter-spacing: .3em; text-transform: uppercase; }
.eyebrow { color: #c9c4d5; font-size: .72rem; margin: 0 0 .6rem; }
h1 { font: normal clamp(3.9rem, 13vw, 7rem)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; margin: 0; color: #f7f2e9; }
.rule { display: flex; align-items: center; justify-content: center; margin: 1.85rem auto 2.15rem; max-width: 15rem; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #9e8f78); }
.rule::after { transform: rotate(180deg); }
.rule span { height: .43rem; width: .43rem; margin: 0 .8rem; border: 1px solid #c4a777; transform: rotate(45deg); }
.announcement { font-size: .85rem; color: #dfbe88; font-weight: 600; margin: 0 0 1.4rem; }
.description { font-size: clamp(1.05rem, 2.7vw, 1.24rem); line-height: 1.65; color: #e1dfec; max-width: 32rem; margin: 0 auto; }
.subtle { color: #9ea4bf; font-size: .91rem; margin: 1.05rem 0 0; }
.footer { text-align: center; padding: 1.2rem; background: #0b1020; font-size: .74rem; color: #8e93a8; letter-spacing: .06em; }
.footer span { margin: 0 .35rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: appear .8s ease-out both; }
  @keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}