:root {
  color-scheme: dark;
  --ink: #f1eee6;
  --muted: #8c8982;
  --ember: #b98b56;
  --void: #080808;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--void); }

body {
  overflow: hidden;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.scene {
  --x: 50%;
  --y: 48%;
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 42% at var(--x) var(--y), rgba(185,139,86,.08), transparent 68%),
    linear-gradient(145deg, #0b0b0a, #050505 62%);
}

.noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  pointer-events: none;
}

.halo {
  position: absolute;
  width: min(46vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(185,139,86,.08);
  box-shadow: inset 0 0 100px rgba(185,139,86,.018), 0 0 100px rgba(0,0,0,.8);
  animation: breathe 9s ease-in-out infinite;
}

.frame { position: absolute; inset: clamp(18px, 4vw, 56px); pointer-events: none; }
.frame__line { position: absolute; background: rgba(241,238,230,.18); }
.frame__line--top, .frame__line--bottom { width: 32px; height: 1px; }
.frame__line--left, .frame__line--right { width: 1px; height: 32px; }
.frame__line--top { top: 0; left: 0; }
.frame__line--right { top: 0; right: 0; }
.frame__line--bottom { right: 0; bottom: 0; }
.frame__line--left { left: 0; bottom: 0; }

.message { width: min(82vw, 760px); text-align: center; transform: translateY(-1vh); }
.eyebrow {
  margin: 0 0 28px;
  color: var(--ember);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .44em;
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(42px, 8vw, 112px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .95;
  text-wrap: balance;
}

.rule { width: 1px; height: 74px; margin: 35px auto 22px; overflow: hidden; background: rgba(241,238,230,.12); }
.rule span { display: block; width: 100%; height: 40%; background: var(--ember); animation: descend 3.8s ease-in-out infinite; }
.footnote { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.mark {
  position: absolute;
  right: clamp(25px, 5vw, 66px);
  bottom: clamp(25px, 5vw, 66px);
  display: flex;
  gap: 4px;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}
.mark span { width: 2px; height: 18px; background: rgba(241,238,230,.22); }
.mark span:nth-child(2) { background: var(--ember); transform: translateY(-5px); }

@keyframes breathe { 50% { transform: scale(1.04); opacity: .62; } }
@keyframes descend { 0% { transform: translateY(-110%); } 55%,100% { transform: translateY(260%); } }

@media (max-width: 600px) {
  .halo { width: 82vw; }
  .eyebrow { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .halo, .rule span { animation: none; }
}