:root {
  --void: #0a0a0c;
  --bone: #e8e3d8;
  --bone-dim: #9a958a;
  --moss: #5c7a68;
  --hairline: rgba(232, 227, 216, 0.14);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: 'Space Mono', monospace;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(232,227,216,0.03), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(92,122,104,0.05), transparent 45%);
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw 4vh;
  text-align: center;
}

.frame {
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  padding: 14px;
  animation: settle 900ms ease-out both;
}

.relic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) contrast(1.03);
  opacity: 0;
  animation: reveal 1100ms ease-out 120ms forwards;
}

.corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--moss);
  opacity: 0.9;
}
.corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.plate {
  margin: 18px 0 0;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.desc {
  margin: 22px 0 0;
  max-width: 60ch;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.30rem;
  line-height: 1.6;
  color: var(--bone);
  opacity: 0.9;
}

.desc2 {
  margin-top: 30px;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.links {
  margin-top: 30px;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.links a {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--bone);
  border-bottom-color: var(--moss);
}

.sep {
  color: var(--hairline);
  margin: 0 10px;
}

.foot {
  padding: 18px 0 22px;
  text-align: center;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
  opacity: 0.5;
}

@keyframes reveal {
  from { opacity: 0; filter: grayscale(15%) contrast(1.03) blur(6px); }
  to   { opacity: 1; filter: grayscale(15%) contrast(1.03) blur(0); }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .frame, .relic {
    animation: none;
    opacity: 1;
    filter: grayscale(15%) contrast(1.03);
  }
}