:root {
  /* Playfair Display** for the wordmark; IBM Plex Mono** only for sparse timestamps. */
  --parchment: #F1E6D0;
  --amber: #F2B14B;
  --emerald: #0E5B4B;
  --aubergine: #24112F;
  --brass: #9C7A3C;
  --obsidian: #07040B;
  --garnet: #B51E46;
  --amethyst: #6D3CCF;
  --playfair: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment);
  background: var(--obsidian);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::selection { background: var(--garnet); color: var(--parchment); }

.scene {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 77% 14%, rgba(109, 60, 207, 0.22), transparent 25rem),
    radial-gradient(circle at 20% 42%, rgba(181, 30, 70, 0.14), transparent 28rem),
    radial-gradient(circle at 70% 78%, rgba(14, 91, 75, 0.18), transparent 31rem),
    linear-gradient(105deg, var(--obsidian) 0%, #100817 45%, var(--aubergine) 100%);
  perspective: 1400px;
}

.velvet-grain,
.velvet-grain::before,
.velvet-grain::after {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
}

.velvet-grain {
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(241, 230, 208, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(156, 122, 60, 0.08) 0 1px, transparent 1px);
  background-size: 29px 31px, 41px 43px;
  mix-blend-mode: screen;
}

.velvet-grain::before {
  content: "";
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 9px);
}

.velvet-grain::after {
  content: "";
  background: radial-gradient(circle at var(--mx, 70%) var(--my, 30%), rgba(242, 177, 75, 0.11), transparent 18rem);
}

.soot-halo {
  position: fixed;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.22;
  z-index: 0;
  animation: smokeDrift 16s ease-in-out infinite alternate;
}

.halo-one { left: 8%; top: 8%; background: var(--garnet); }
.halo-two { right: 4%; bottom: 10%; background: var(--emerald); animation-delay: -6s; }

.archive-head {
  position: fixed;
  left: clamp(1rem, 3vw, 2.8rem);
  top: clamp(1rem, 3vw, 2.5rem);
  z-index: 8;
  display: grid;
  gap: 0.35rem;
}

.wordmark {
  font-family: var(--playfair);
  font-size: clamp(1.8rem, 4vw, 4.6rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.055em;
  text-shadow: 0 0 28px rgba(242, 177, 75, 0.14);
}

.head-note {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  color: rgba(241, 230, 208, 0.66);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
}

.head-note span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--garnet);
  box-shadow: 0 0 18px var(--garnet);
  animation: recordPulse 1.8s ease-in-out infinite;
}

.rail {
  position: fixed;
  left: 41%;
  top: 0;
  width: 1px;
  height: 100vh;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(156, 122, 60, 0.65) 12%, rgba(242, 177, 75, 0.7) 50%, rgba(156, 122, 60, 0.45) 88%, transparent);
  box-shadow: 0 0 18px rgba(242, 177, 75, 0.18);
  transform: rotateX(var(--rail-x, 0deg));
}

.rail::before,
.rail::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 38vh;
  background: linear-gradient(180deg, rgba(242, 177, 75, 0.18), transparent);
  filter: blur(3px);
}

.rail::before { top: 7vh; }
.rail::after { bottom: 8vh; transform: rotate(180deg); }

.rail-progress {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 0%;
  background: linear-gradient(var(--amber), var(--garnet), var(--amethyst));
  box-shadow: 0 0 24px rgba(242, 177, 75, 0.6);
}

.ember {
  position: absolute;
  left: -0.43rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 45% 55% 48% 52%;
  background: radial-gradient(circle at 45% 34%, #fff3c4 0 10%, var(--amber) 20%, var(--garnet) 70%, transparent 72%);
  box-shadow: 0 0 26px var(--amber), 0 0 54px rgba(181, 30, 70, 0.65);
  animation: candleFlicker 1.4s ease-in-out infinite;
}

.top-ember { top: 18vh; }

.archive-index {
  position: fixed;
  right: clamp(1rem, 3vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: grid;
  gap: 0.7rem;
}

.index-link {
  color: rgba(241, 230, 208, 0.45);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  transition: color 0.35s ease, transform 0.35s ease;
}

.index-link b {
  font-family: var(--playfair);
  color: var(--brass);
  font-size: 1.2rem;
}

.index-link span { opacity: 0; transform: translateX(8px); transition: 0.35s ease; }
.index-link.active, .index-link:hover { color: var(--parchment); transform: translateX(-0.4rem); }
.index-link.active span, .index-link:hover span { opacity: 1; transform: translateX(0); }

.archive-corridor {
  position: relative;
  z-index: 4;
}

.entry {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(16rem, 31%) minmax(20rem, 56%);
  column-gap: clamp(3rem, 9vw, 9rem);
  align-items: center;
  padding: clamp(7rem, 12vw, 10rem) clamp(2rem, 7vw, 8rem) clamp(5rem, 9vw, 8rem);
  transform-style: preserve-3d;
}

.entry:nth-child(even) { padding-top: 12rem; }

.node {
  position: absolute;
  left: calc(41% - 0.82rem);
  top: 50%;
  z-index: 5;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 43% 57% 51% 49%;
  background: radial-gradient(circle at 35% 30%, var(--amber), var(--brass) 35%, #5d201d 74%, var(--garnet));
  box-shadow: inset 0 0 0 1px rgba(241,230,208,0.22), 0 0 0 5px rgba(156,122,60,0.09), 0 0 28px rgba(242,177,75,0.25);
  display: grid;
  place-items: center;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.node span { font-family: var(--mono); font-size: 0.46rem; color: var(--obsidian); font-weight: 500; }
.entry.active .node { transform: rotate(var(--seal-rot, -7deg)) scale(1.18); box-shadow: inset 0 0 0 1px rgba(241,230,208,0.38), 0 0 0 7px rgba(242,177,75,0.13), 0 0 44px rgba(242,177,75,0.5); }

.archive-note {
  max-width: 22rem;
  color: rgba(241, 230, 208, 0.72);
  transform: translateZ(45px);
}

.archive-note p:not(.mono) {
  margin: 1rem 0 1.35rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.75;
}

.mono,
.plate-label {
  font-family: var(--mono);
  color: var(--amber);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.file-tags { display: flex; flex-wrap: wrap; gap: 0.48rem; }
.file-tags span {
  border: 1px solid rgba(156, 122, 60, 0.34);
  background: rgba(36, 17, 47, 0.52);
  color: rgba(241, 230, 208, 0.68);
  border-radius: 999px;
  padding: 0.38rem 0.62rem;
  font-size: 0.72rem;
}

.plate {
  position: relative;
  min-height: clamp(28rem, 63vh, 42rem);
  padding: clamp(1.4rem, 3vw, 3.2rem);
  border: 1px solid rgba(156, 122, 60, 0.36);
  border-radius: 2rem;
  background:
    radial-gradient(circle at var(--mx, 70%) var(--my, 26%), rgba(242, 177, 75, 0.18), transparent 13rem),
    linear-gradient(135deg, rgba(241,230,208,0.08), rgba(109,60,207,0.13) 33%, rgba(7,4,11,0.7) 70%),
    rgba(36, 17, 47, 0.68);
  box-shadow: 0 2rem 5rem rgba(0,0,0,0.55), inset 0 1px 0 rgba(241,230,208,0.14);
  transform: rotateY(var(--tilt-x, -8deg)) rotateX(var(--tilt-y, 4deg)) translateZ(70px);
  transform-style: preserve-3d;
  overflow: hidden;
  transition: transform 0.22s ease-out, border-color 0.4s ease, opacity 0.6s ease;
}

.plate::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(115deg, transparent 35%, rgba(241,230,208,0.16) 44%, rgba(242,177,75,0.16) 47%, transparent 58%);
  transform: translateX(var(--glint, -20%)) rotate(10deg);
  animation: glassGlint 7.8s ease-in-out infinite;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(241,230,208,0.08);
  border-radius: 1.45rem;
  background-image: radial-gradient(circle, rgba(241,230,208,0.14) 0 1px, transparent 1px);
  background-size: 27px 29px;
  opacity: 0.23;
}

.entry:not(.active) .plate { opacity: 0.62; transform: rotateY(-12deg) rotateX(6deg) scale(0.94) translateZ(10px); }
.entry.active .plate { border-color: rgba(242, 177, 75, 0.48); }

.plate > * { position: relative; z-index: 2; }

h1, h2 {
  font-family: var(--playfair);
  margin: 1.4rem 0 1rem;
  max-width: 48rem;
  font-size: clamp(3.2rem, 7.5vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.065em;
  font-weight: 700;
}

h2 { font-size: clamp(2.8rem, 5.8vw, 6.2rem); }

.plate p {
  width: min(34rem, 82%);
  color: rgba(241, 230, 208, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.artifact {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1rem, 4vw, 3rem);
  width: min(22rem, 44%);
  aspect-ratio: 1.15;
  transform: translateZ(120px) rotateZ(-4deg);
}

.camera-body {
  position: absolute;
  left: 4%;
  top: 25%;
  width: 78%;
  height: 42%;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #040207, #1b0c25 48%, #07040B 100%);
  box-shadow: inset 0 0 0 2px rgba(156,122,60,0.3), 0 2rem 3rem rgba(0,0,0,0.45);
}

.camera-body span {
  position: absolute;
  width: 25%;
  height: 26%;
  right: 8%;
  top: -24%;
  border-radius: 0.6rem 0.6rem 0 0;
  background: linear-gradient(180deg, var(--brass), #2b140d);
}

.lens-ring {
  position: absolute;
  left: 23%;
  top: 16%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 5deg, var(--brass) 0 4deg, #24112F 4deg 8deg);
  box-shadow: 0 0 30px rgba(242,177,75,0.18);
  display: grid;
  place-items: center;
}

.lens-ring i {
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 30%, rgba(241,230,208,0.95), var(--amber) 10%, var(--garnet) 25%, var(--amethyst) 45%, #050207 72%);
}

.candle { position: absolute; left: 38%; top: -6%; width: 11%; height: 35%; background: linear-gradient(#F1E6D0, #9C7A3C); border-radius: 1rem 1rem 0.35rem 0.35rem; }
.candle em { position: absolute; left: 50%; top: -1.45rem; width: 1rem; height: 1.8rem; transform: translateX(-50%); border-radius: 60% 40% 55% 45%; background: radial-gradient(circle at 50% 65%, #fff8c9, var(--amber) 45%, var(--garnet) 80%); box-shadow: 0 0 28px var(--amber); animation: candleFlicker 1.1s ease-in-out infinite; }
.cable { position: absolute; left: 43%; top: 66%; width: 2px; height: 40%; background: linear-gradient(var(--brass), transparent); }

.negative-sleeve { position: absolute; inset: 12% 6%; border-radius: 1rem; background: linear-gradient(135deg, rgba(109,60,207,0.28), rgba(7,4,11,0.7)); border: 1px solid rgba(241,230,208,0.12); display: flex; gap: 5%; padding: 8%; }
.negative-sleeve i { flex: 1; border: 1px solid rgba(242,177,75,0.24); background: radial-gradient(circle at 50% 30%, rgba(242,177,75,0.12), transparent 46%), linear-gradient(#100817, #07040B); box-shadow: inset 0 0 20px rgba(181,30,70,0.18); }
.wax-seal { position: absolute; right: 12%; bottom: 8%; width: 4.7rem; height: 4.7rem; display: grid; place-items: center; border-radius: 43% 57% 48% 52%; background: radial-gradient(circle at 30% 25%, #e04b66, var(--garnet) 48%, #541325); color: var(--parchment); font-family: var(--playfair); font-size: 2.2rem; box-shadow: 0 0 32px rgba(181,30,70,0.45); }
.brass-ticks { position: absolute; left: 4%; bottom: 2%; width: 65%; height: 1.1rem; background: repeating-linear-gradient(90deg, var(--brass) 0 2px, transparent 2px 14px); opacity: 0.75; }

.convex-mirror { position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgba(241,230,208,0.75), rgba(242,177,75,0.22) 12%, rgba(109,60,207,0.55) 32%, rgba(181,30,70,0.35) 55%, #050207 76%); box-shadow: inset -30px -35px 50px rgba(0,0,0,0.58), 0 0 0 12px rgba(156,122,60,0.18), 0 2rem 4rem rgba(0,0,0,0.5); }
.convex-mirror span { position: absolute; width: 0.7rem; height: 1.5rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 20px var(--amber); animation: candleFlicker 1.5s ease-in-out infinite; }
.convex-mirror span:nth-child(1) { left: 38%; top: 22%; }
.convex-mirror span:nth-child(2) { left: 54%; top: 34%; animation-delay: -0.5s; }
.convex-mirror span:nth-child(3) { left: 28%; top: 47%; animation-delay: -0.9s; }
.keyhole { position: absolute; right: 2%; bottom: 4%; width: 3.2rem; height: 5rem; background: linear-gradient(var(--brass), #2c160d); clip-path: polygon(50% 0, 100% 42%, 68% 42%, 68% 100%, 32% 100%, 32% 42%, 0 42%); opacity: 0.8; }

.shutter { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, #07040B 0 20%, transparent 21%), repeating-conic-gradient(from 0deg, rgba(156,122,60,0.88) 0 18deg, rgba(36,17,47,0.98) 18deg 42deg); box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 0 0 10px rgba(156,122,60,0.16); animation: shutterBreathe 8s ease-in-out infinite; }
.shutter i { position: absolute; width: 36%; height: 36%; left: 32%; top: 32%; transform-origin: 50% 50%; background: linear-gradient(135deg, rgba(109,60,207,0.42), rgba(7,4,11,0.95)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shutter i:nth-child(2) { transform: rotate(60deg); }
.shutter i:nth-child(3) { transform: rotate(120deg); }
.shutter i:nth-child(4) { transform: rotate(180deg); }
.shutter i:nth-child(5) { transform: rotate(240deg); }
.shutter i:nth-child(6) { transform: rotate(300deg); }
.reel-id { position: absolute; right: 0; bottom: -1rem; color: rgba(241,230,208,0.7); }

.glass-prism { position: absolute; inset: 12% 18%; clip-path: polygon(50% 0, 100% 35%, 76% 100%, 24% 100%, 0 35%); background: linear-gradient(135deg, rgba(241,230,208,0.34), rgba(109,60,207,0.46), rgba(14,91,75,0.25), rgba(7,4,11,0.7)); border: 1px solid rgba(241,230,208,0.22); box-shadow: 0 0 55px rgba(109,60,207,0.35); }
.glass-prism span { position: absolute; inset: 18%; background: radial-gradient(circle at 50% 55%, var(--amber), var(--garnet) 35%, transparent 40%); filter: blur(2px); animation: candleFlicker 1.3s ease-in-out infinite; }
.final-ember { position: absolute; left: 48%; bottom: 8%; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--garnet); box-shadow: 0 0 38px var(--garnet), 0 0 70px var(--amber); }

@keyframes candleFlicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) rotate(-2deg); opacity: 0.86; }
  35% { transform: translateX(-48%) scaleY(1.18) rotate(3deg); opacity: 1; }
  70% { transform: translateX(-52%) scaleY(0.88) rotate(-5deg); opacity: 0.72; }
}

@keyframes recordPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes smokeDrift { from { transform: translate3d(-2rem, 1rem, 0) scale(0.95); } to { transform: translate3d(2rem, -1rem, 0) scale(1.08); } }
@keyframes glassGlint { 0%, 58%, 100% { transform: translateX(-35%) rotate(10deg); } 72% { transform: translateX(35%) rotate(10deg); } }
@keyframes shutterBreathe { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(9deg) scale(1.04); } }

@media (max-width: 900px) {
  .rail { left: 1.5rem; }
  .node { left: 0.68rem; }
  .archive-index { display: none; }
  .entry { grid-template-columns: 1fr; padding-left: 3.6rem; padding-right: 1.2rem; gap: 2rem; }
  .archive-note { order: 2; }
  .plate { min-height: 35rem; transform: rotateY(-4deg) rotateX(3deg); }
  .artifact { width: 58%; opacity: 0.85; }
  .plate p { width: 100%; }
}

@media (max-width: 560px) {
  .archive-head { position: absolute; }
  h1, h2 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .plate { border-radius: 1.2rem; padding: 1.25rem; }
  .artifact { width: 74%; right: 0.5rem; bottom: 0.5rem; }
}