:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #09090d;
  color: #eee7db;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(94, 70, 106, .19), transparent 39%),
    radial-gradient(ellipse at 8% 94%, rgba(74, 49, 45, .15), transparent 33%),
    #09090d;
}

.archive-shell {
  position: relative;
  width: min(100%, 590px);
  padding: clamp(34px, 7vw, 68px) clamp(24px, 8vw, 76px) 30px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(155deg, rgba(25, 23, 31, .97), rgba(14, 14, 20, .98) 58%, rgba(19, 17, 22, .98));
  border: 1px solid rgba(195, 170, 132, .27);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .58), inset 0 0 44px rgba(183, 154, 111, .035);
}

.archive-shell::before,
.archive-shell::after {
  position: absolute;
  width: 6px;
  height: 6px;
  content: "";
  border: 1px solid rgba(205, 177, 135, .7);
  transform: rotate(45deg);
}

.archive-shell::before { top: 14px; left: 14px; }
.archive-shell::after { right: 14px; bottom: 14px; }

.sigil {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  place-items: center;
  color: #d1b88f;
  border: 1px solid rgba(205, 177, 135, .44);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(205, 177, 135, .1), inset 0 0 18px rgba(205, 177, 135, .08);
}

.sigil span { font-size: 24px; }

.eyebrow,
footer {
  color: #bda982;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.eyebrow span,
footer span { padding: 0 6px; color: #755f60; }

h1 {
  margin: 17px 0 12px;
  color: #f1e7d8;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(34px, 8vw, 48px);
  font-weight: 400;
  letter-spacing: -.035em;
}

.description,
.state-copy,
.gate-copy {
  color: #aaa5a3;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 16px;
  line-height: 1.75;
}

.description { max-width: 390px; margin: 0 auto; }
.state { margin-top: 34px; }
.state[hidden] { display: none; }
.state-copy { margin: 0 0 19px; }
.gate-copy { margin: 0 auto 9px; }
.gate-copy + .gate-copy { margin-bottom: 23px; }

.action {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  padding: 12px 18px;
  color: #eee7db;
  font: inherit;
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(205, 177, 135, .3);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.action:hover { border-color: rgba(205, 177, 135, .75); transform: translateY(-1px); }
.action:focus-visible { outline: 2px solid #d1b88f; outline-offset: 3px; }
.action.primary { color: #151218; background: #c7ad82; border-color: #c7ad82; }
.action.primary:hover { background: #d7c29d; border-color: #d7c29d; }
.action.quiet { min-height: 40px; color: #aaa5a3; border-color: transparent; }
.action:disabled { opacity: .58; cursor: wait; transform: none; }

.status { min-height: 20px; margin: 16px 0 0; color: #bca8a0; font-size: 12px; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: #c7ad82; border-radius: 50%; box-shadow: 0 0 14px #c7ad82; animation: breathe 1.6s ease-in-out infinite; }
footer { margin-top: 43px; color: #777174; font-size: 8px; letter-spacing: .2em; }

@keyframes breathe { 50% { opacity: .34; box-shadow: 0 0 3px #c7ad82; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}