:root {
  color-scheme: dark;
  --ink: #e7e7e7;
  --muted: #777;
  --line: rgba(255, 255, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.64);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.055), transparent 24rem),
    linear-gradient(180deg, #050505 0%, #111 52%, #030303 100%);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.page {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: clamp(1.25rem, 4vw, 4rem);
  isolation: isolate;
  place-items: center;
}

.page::before {
  position: fixed;
  inset: 0;
  z-index: -4;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.monument {
  position: relative;
  width: min(100%, 42rem);
  min-height: clamp(18rem, 52vh, 29rem);
  display: grid;
  align-content: center;
  gap: clamp(1.4rem, 4vw, 2rem);
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.monument::before,
.monument::after {
  position: absolute;
  left: 50%;
  width: min(18rem, 46vw);
  height: 1px;
  content: "";
  background: var(--line);
  transform: translateX(-50%);
}

.monument::before {
  top: 0;
}

.monument::after {
  bottom: 0;
}

time {
  color: var(--muted);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: clamp(0.72rem, 1.8vw, 0.86rem);
  letter-spacing: 0.18em;
}

h1 {
  margin: 0;
  color: rgba(231, 231, 231, 0.88);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.03;
  text-shadow: 0 1.5rem 4rem var(--shadow);
}