/* back.html only: darker + slightly warped, without adding explicit horror UI elements */
body.back{
  background:#0f1115;
  color:#e8e8ea;
}
body.back .topbar,
body.back .hero,
body.back .footer,
body.back .side .box,
body.back .article-card,
body.back .hero-img{
  background:#141823 !important;
  border-color:#2a3140 !important;
}
body.back .breadcrumb,
body.back .navitem,
body.back .pmeta,
body.back .notice,
body.back .tag,
body.back .archive a{
  color:#b7bcc7 !important;
}
body.back a{ color:#8fb6ff; }
body.back .navitem::before{ background:#4b5568; }
body.back .timeline .t-item{ border-top-color:#2a3140; }
body.back .vline{ background:#2a3140; }
body.back .thumb{ background:#111420; border-color:#2a3140; color:#566079; }
body.back .excerpt{ color:#d6d7db; opacity:0.95; }

/* subtle distortion: use variable font-ish jitter + skew */
body.back .ptitle,
body.back .excerpt,
body.back .article,
body.back .pmeta,
body.back .tag,
body.back .breadcrumb{
  transform: translateZ(0);
  text-shadow: 0.6px 0 rgba(120,170,255,0.12), -0.6px 0 rgba(255,120,180,0.08);
}
body.back .ptitle{
  letter-spacing:0.02em;
}

/* optional slight global skew on large screens only (keeps mobile readable) */
@media (min-width: 980px){
  body.back main{
    transform: skewX(-0.6deg);
    transform-origin: top left;
  }
}

/* stronger weirdness: brief flips applied by glitch.js */
body.back .weird{
  transition: transform 220ms ease, filter 220ms ease;
  filter: saturate(1.05) contrast(1.05);
}
/* 2-character units */
body.back .bitpair{
  display:inline-block;
  will-change: transform, filter;
  transition: transform 180ms ease, filter 180ms ease;
}

/* noisy blur + shake */
@keyframes noiseJitter {
  0%   { transform: translate(0,0) }
  20%  { transform: translate(0.6px,-0.4px) }
  40%  { transform: translate(-0.8px,0.2px) }
  60%  { transform: translate(0.4px,0.8px) }
  80%  { transform: translate(-0.2px,-0.6px) }
  100% { transform: translate(0,0) }
}
body.back .bitpair.noise{
  animation: noiseJitter 160ms steps(2,end) infinite;
  filter: blur(0.8px) contrast(1.12);
  text-shadow: 1px 0 rgba(120,170,255,0.18), -1px 0 rgba(255,120,180,0.14);
}

body.back .weird.spinZ{ transform: rotate(180deg) !important; }