feat: polish spectra lab editorial details

styles.css

@@ -86,11 +86,16 @@ a {
 }
 
 .topbar {
+  position: sticky;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 28px 0 20px;
+  padding: 22px 0 18px;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent 18%), color-mix(in srgb, var(--bg) 58%, transparent 42%));
+  backdrop-filter: blur(14px);
+  z-index: 8;
 }
 
 .brand {
@@ -141,10 +146,47 @@ a {
   color: var(--text);
 }
 
+.mode-toggle:hover {
+  border-color: var(--line-strong);
+  background: var(--accent-soft);
+}
+
 .hero {
   padding: 42px 0 72px;
 }
 
+.hero-ledger {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 30px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+}
+
+.ledger-item {
+  padding: 18px 18px 20px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
+}
+
+.ledger-item span,
+.closing-signoff span {
+  display: block;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+.ledger-item strong {
+  display: block;
+  margin-top: 14px;
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 600;
+}
+
 .hero-meta,
 .section-head,
 .footer {
@@ -274,6 +316,11 @@ a {
   background: var(--accent-soft);
 }
 
+.work-item.is-active .work-number,
+.work-item.is-active small {
+  color: var(--text);
+}
+
 .work-number {
   font-size: 0.8rem;
   color: var(--muted);
@@ -299,17 +346,32 @@ a {
 }
 
 .stage-card {
+  position: relative;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 34px;
+  overflow: hidden;
   background:
     linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 100%),
     linear-gradient(135deg, rgba(255,255,255,0.02), transparent 48%),
     linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 80%, black 20%));
 }
 
+.stage-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
+  opacity: 0.5;
+}
+
+.stage-card.is-refreshing {
+  animation: stageRefresh 320ms ease;
+}
+
 .stage-index {
   font-size: clamp(4.2rem, 8vw, 8rem);
   line-height: 0.92;
@@ -354,6 +416,15 @@ a {
   color: rgba(20, 20, 20, 0.7);
 }
 
+.closing-signoff {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 30px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(20, 20, 20, 0.12);
+}
+
 .footer {
   padding: 22px 0 42px;
   border-top: 1px solid var(--line);
@@ -370,12 +441,24 @@ a {
   transform: translateY(0);
 }
 
+@keyframes stageRefresh {
+  0% {
+    transform: translateY(8px);
+    opacity: 0.86;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 @media (max-width: 1100px) {
   .topbar,
   .hero-meta,
   .section-head,
   .works-layout,
   .hero-grid,
+  .hero-ledger,
   .statement-grid,
   .system-grid,
   .footer {
@@ -435,4 +518,8 @@ a {
   .closing-panel {
     padding: 24px;
   }
+
+  .closing-signoff {
+    flex-direction: column;
+  }
 }