.constructivist-rail {
  --crail-paper: #d9d2c3;
  --crail-red: #d7423e;
  --crail-deep-red: #8f1e34;
  --crail-yellow: #efbd43;
  --crail-blue: #203c48;
  --crail-shift-x: 0px;
  --crail-shift-y: 0px;
  display: none;
  min-width: 0;
}

@media (min-width: 1400px) {
  main.quick-page-frame.has-constructivist-rail {
    width: min(1480px, calc(100% - 36px));
    grid-template-columns: 188px minmax(0, 1fr) 188px;
  }

  .constructivist-rail {
    position: sticky;
    top: 112px;
    display: block;
    height: min(680px, calc(100vh - 132px));
    min-height: 0;
    align-self: start;
  }

  body.admin-quick-edit-visible .constructivist-rail {
    height: min(680px, calc(100vh - 156px - var(--admin-quick-edit-height, 48px)));
    min-height: 0;
  }
}

.crail-poster {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #08090b;
  box-shadow: 0 0 28px rgba(0, 0, 0, .38), inset 0 0 30px rgba(0, 0, 0, .36);
  isolation: isolate;
}

.crail-poster::before {
  position: absolute;
  inset: 0;
  z-index: 30;
  opacity: .25;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .2) 3px 4px);
  content: "";
  pointer-events: none;
}

.crail-poster::after {
  position: absolute;
  inset: 9px;
  z-index: 31;
  border: 1px solid rgba(230, 83, 114, .18);
  content: "";
  pointer-events: none;
}

.crail-code,
.crail-vertical-index {
  position: absolute;
  z-index: 35;
  color: rgba(230, 83, 114, .78);
  font-size: 7px;
  letter-spacing: .12em;
}

.crail-code {
  top: 15px;
  left: 15px;
}

.crail-vertical-index {
  right: 15px;
  bottom: 15px;
  writing-mode: vertical-rl;
}

/* LOG / Strong overprint */
.crail-overprint {
  background:
    radial-gradient(circle at 82% 20%, rgba(230, 83, 114, .07), transparent 28%),
    #08090b;
}

.crail-print-disc,
.crail-print-wedge,
.crail-print-slab,
.crail-print-number {
  position: absolute;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), filter .24s ease;
}

.crail-print-disc {
  top: 15%;
  left: 17%;
  width: 118px;
  height: 118px;
  border-radius: 50%;
}

.crail-print-disc--paper {
  z-index: 2;
  border: 1px solid var(--crail-paper);
  background: rgba(217, 210, 195, .84);
  transform: translate(-3px, 4px);
  animation: crail-paper-register 13.44s ease-in-out infinite;
}

.crail-print-disc--ink {
  z-index: 3;
  background: rgba(215, 66, 62, .78);
  mix-blend-mode: screen;
  transform: translate(4px, -3px);
  animation: crail-ink-register 13.44s ease-in-out infinite;
}

.crail-print-wedge {
  z-index: 6;
  top: 32%;
  right: -31%;
  width: 170px;
  height: 260px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 22%, 43% 100%);
  transform: rotate(-7deg) translateX(var(--crail-shift-x));
  animation: crail-wedge-drive 4.4s ease-in-out infinite;
}

.crail-print-slab {
  z-index: 7;
  bottom: 15%;
  left: -22%;
  width: 146%;
  height: 58px;
  border-block: 1px solid rgba(217, 210, 195, .42);
  background: rgba(217, 210, 195, .09);
  transform: rotate(-17deg) translateY(var(--crail-shift-y));
}

.crail-print-halftone {
  position: absolute;
  z-index: 4;
  top: 7%;
  right: -12%;
  width: 92px;
  height: 230px;
  opacity: .56;
  background-image: radial-gradient(circle, rgba(217, 210, 195, .58) 0 1px, transparent 1.2px);
  background-size: 6px 6px;
  transform: rotate(12deg);
}

.crail-print-rule {
  position: absolute;
  z-index: 8;
  display: block;
  height: 2px;
  background: rgba(217, 210, 195, .58);
}

.crail-print-rule--1 { top: 19%; right: 8%; width: 35%; }
.crail-print-rule--2 { top: 22%; right: 8%; width: 22%; }
.crail-print-rule--3 { bottom: 17%; left: 7%; width: 33%; }

.crail-print-number {
  z-index: 9;
  top: 45%;
  left: 7%;
  color: rgba(217, 210, 195, .92);
  font-size: 60px;
  font-weight: normal;
  line-height: 1;
  transform: translate(var(--crail-shift-x), var(--crail-shift-y));
}

.crail-overprint.is-activated .crail-print-disc--paper,
.crail-overprint.is-activated .crail-print-disc--ink {
  transform: translate(0, 0);
}

.crail-overprint.is-activated .crail-print-wedge {
  filter: brightness(1.12);
}

@keyframes crail-paper-register {
  0%, 72%, 100% { transform: translate(-3px, 4px); }
  80%, 86% { transform: translate(0, 0); }
}

@keyframes crail-ink-register {
  0%, 72%, 100% { transform: translate(4px, -3px); }
  80%, 86% { transform: translate(0, 0); }
}

@keyframes crail-wedge-drive {
  0%, 100% { filter: brightness(.92); transform: rotate(-7deg) translateX(0); }
  48% { filter: brightness(1.14); transform: rotate(-3deg) translateX(-5px); }
}

/* LAB / Mobile exhibit */
.crail-mobile-poster {
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(230, 83, 114, .045) 50%, transparent 50.4%),
    #08090b;
}

.crail-mobile-poster .mobile-field {
  position: absolute;
  inset: 36px 10px 26px;
  overflow: hidden;
}

.crail-mobile-poster .mobile-field::before {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: -28%;
  width: 148%;
  height: 56%;
  opacity: .12;
  background: linear-gradient(90deg, rgba(217, 210, 195, .02), rgba(217, 210, 195, .2));
  clip-path: polygon(100% 0, 0 52%, 100% 100%);
  content: "";
  animation: mobile-projector-flicker 3.8s steps(2, end) infinite;
}

.crail-mobile-poster .mobile-track {
  position: absolute;
  z-index: 3;
  bottom: 8%;
  left: 17%;
  width: 2px;
  height: 84%;
  background: var(--crail-red);
  box-shadow: 6px 0 rgba(217, 210, 195, .22);
  transform: rotate(17deg) translateX(var(--crail-shift-x));
  transform-origin: bottom;
}

.crail-mobile-poster .mobile-pulley {
  position: absolute;
  z-index: 7;
  top: 6%;
  right: 10%;
  width: 58px;
  height: 58px;
  border: 2px solid var(--crail-red);
  border-radius: 50%;
  animation: mobile-pulley-turn 14s linear infinite;
}

.crail-mobile-poster .mobile-pulley::before,
.crail-mobile-poster .mobile-pulley::after,
.crail-mobile-poster .mobile-pulley i {
  position: absolute;
  content: "";
}

.crail-mobile-poster .mobile-pulley::before {
  inset: 10px;
  border: 1px solid rgba(217, 210, 195, .58);
  border-radius: 50%;
}

.crail-mobile-poster .mobile-pulley::after {
  top: 50%;
  right: 4px;
  left: 4px;
  height: 1px;
  background: rgba(217, 210, 195, .58);
}

.crail-mobile-poster .mobile-pulley i {
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: rgba(217, 210, 195, .58);
}

.crail-mobile-poster .mobile-cable {
  position: absolute;
  z-index: 2;
  top: 14%;
  width: 1px;
  height: 72%;
  background: rgba(217, 210, 195, .48);
  transform-origin: top;
}

.crail-mobile-poster .mobile-cable--1 { right: 27%; transform: rotate(8deg); }
.crail-mobile-poster .mobile-cable--2 { right: 18%; transform: rotate(-6deg); }

.crail-mobile-poster .mobile-panel {
  position: absolute;
  z-index: 8;
  display: block;
  width: 96px;
  height: 80px;
  padding: 6px;
  border: 1px solid rgba(217, 210, 195, .52);
  background: #0c0d10;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), translate .24s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
  animation: mobile-panel-float 7.2s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: translate;
}

.crail-mobile-poster .mobile-panel i {
  display: block;
  width: 100%;
  height: 100%;
}

.crail-mobile-poster .mobile-panel--1 {
  --mobile-float-x: 2px;
  --mobile-float-y: -6px;
  top: 20%;
  left: 5%;
  transform: rotate(-6deg);
  animation-delay: -1.1s;
}

.crail-mobile-poster .mobile-panel--2 {
  --mobile-float-x: -2px;
  --mobile-float-y: -5px;
  top: 43%;
  right: 0;
  transform: rotate(7deg);
  animation-duration: 8.3s;
  animation-delay: -5.2s;
}

.crail-mobile-poster .mobile-panel--3 {
  --mobile-float-x: 1px;
  --mobile-float-y: -7px;
  top: 66%;
  left: 10%;
  transform: rotate(-4deg);
  animation-duration: 7.7s;
  animation-delay: -3.6s;
}

.crail-mobile-poster .mobile-panel--1 i {
  background: linear-gradient(135deg, #9f2946 0 42%, var(--crail-paper) 43% 47%, #13141a 48%);
}

.crail-mobile-poster .mobile-panel--2 i {
  background:
    radial-gradient(circle at 36% 38%, var(--crail-paper) 0 17%, transparent 18%),
    linear-gradient(160deg, #0d0e12 0 58%, #7d213a 59%);
}

.crail-mobile-poster .mobile-panel--3 i {
  background: repeating-linear-gradient(0deg, #0c0d10 0 11px, rgba(230, 83, 114, .36) 11px 13px);
}

.crail-mobile-poster .mobile-weight {
  position: absolute;
  z-index: 6;
  right: 8%;
  bottom: 7%;
  width: 34px;
  height: 68px;
  border: 1px solid rgba(230, 83, 114, .32);
  background: repeating-linear-gradient(135deg, rgba(230, 83, 114, .34) 0 5px, rgba(230, 83, 114, .08) 5px 9px);
  animation: mobile-weight-shift 5.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.crail-mobile-poster .mobile-base {
  position: absolute;
  z-index: 5;
  right: -20%;
  bottom: -3%;
  width: 92%;
  height: 72px;
  background: var(--crail-deep-red);
  clip-path: polygon(28% 0, 100% 38%, 100% 100%, 0 100%);
}

.crail-mobile-poster.is-activated .mobile-panel--1 {
  border-color: var(--crail-red);
  transform: translate(56px, -4px) rotate(-2deg) scale(1.03);
}

.crail-mobile-poster.is-activated .mobile-panel--2 {
  border-color: var(--crail-red);
  transform: translate(-36px, -3px) rotate(-2deg) scale(1.03);
}

.crail-mobile-poster.is-activated .mobile-panel--3 {
  border-color: var(--crail-red);
  transform: translate(-9px, -2px) rotate(-2deg) scale(1.03);
}

@keyframes mobile-pulley-turn { to { transform: rotate(360deg); } }

@keyframes mobile-panel-float {
  0%, 100% { translate: 0 2px; }
  50% { translate: var(--mobile-float-x) var(--mobile-float-y); }
}

@keyframes mobile-weight-shift {
  from { transform: translateY(2px); }
  to { transform: translateY(-5px); }
}

@keyframes mobile-projector-flicker {
  0%, 46%, 100% { opacity: .1; }
  47%, 50% { opacity: .16; }
}

/* VAULT / Linear constructivist ascent */
.crail-rocket-poster {
  background:
    radial-gradient(circle at 76% 18%, rgba(230, 83, 114, .07), transparent 26%),
    #08090b;
}

.crail-vault-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 17%, rgba(217, 210, 195, .72) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 11%, rgba(217, 210, 195, .5) 0 1px, transparent 1.4px),
    radial-gradient(circle at 89% 25%, rgba(230, 83, 114, .56) 0 1px, transparent 1.4px),
    radial-gradient(circle at 26% 31%, rgba(217, 210, 195, .42) 0 1px, transparent 1.4px),
    radial-gradient(circle at 64% 39%, rgba(217, 210, 195, .64) 0 1px, transparent 1.4px),
    radial-gradient(circle at 8% 48%, rgba(217, 210, 195, .46) 0 1px, transparent 1.4px),
    radial-gradient(circle at 92% 54%, rgba(217, 210, 195, .58) 0 1px, transparent 1.4px),
    radial-gradient(circle at 36% 61%, rgba(230, 83, 114, .48) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 70%, rgba(217, 210, 195, .42) 0 1px, transparent 1.4px),
    radial-gradient(circle at 18% 77%, rgba(217, 210, 195, .58) 0 1px, transparent 1.4px);
}

.crail-vault-field::before,
.crail-vault-field::after {
  position: absolute;
  z-index: 8;
  bottom: -351px;
  left: -306px;
  width: 600px;
  height: 600px;
  border: 1px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-7deg);
}

.crail-vault-field::before {
  background: #08090b;
  color: rgba(217, 210, 195, .58);
}

.crail-vault-field::after {
  bottom: -347px;
  left: -302px;
  color: rgba(230, 83, 114, .54);
}

.crail-vault-sun {
  position: absolute;
  z-index: 6;
  top: 13%;
  right: 13%;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(217, 210, 195, .82);
  border-radius: 50%;
  box-shadow: 4px -3px 0 -1px rgba(230, 83, 114, .7);
  animation: crail-vault-sun-register 13.44s ease-in-out infinite;
}

.crail-vault-sun::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(230, 83, 114, .58);
  border-radius: inherit;
  content: "";
}

.crail-vault-axis {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: -20%;
  width: 155%;
  height: 54%;
  border: 1px solid currentColor;
  transform: rotate(-19deg) skewX(-7deg);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.crail-vault-axis--paper {
  color: rgba(217, 210, 195, .26);
}

.crail-vault-axis--red {
  color: rgba(230, 83, 114, .32);
  transform: rotate(-19deg) skewX(-7deg) translate(5px, -4px);
  animation: crail-vault-axis-register 13.44s ease-in-out infinite;
}

.crail-rocket-wire {
  position: absolute;
  z-index: 12;
  top: 24%;
  left: calc(48% - 5px);
  display: block;
  width: 70px;
  height: 258px;
  color: var(--crail-paper);
  transform: translateX(-50%) rotate(10deg);
  transform-origin: 50% 88%;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), filter .26s ease;
}

.crail-rocket-wire i {
  position: absolute;
  display: block;
}

.crail-rocket-wire--paper {
  color: rgba(217, 210, 195, .74);
  transform: translate(calc(-50% - 4px), 3px) rotate(10deg);
  animation: crail-vault-rocket-paper 13.44s ease-in-out infinite;
}

.crail-rocket-wire--red {
  z-index: 13;
  color: rgba(230, 83, 114, .9);
  transform: translate(calc(-50% + 4px), -3px) rotate(10deg);
  animation: crail-vault-rocket-red 13.44s ease-in-out infinite;
}

.crail-wire-nose {
  top: 7px;
  left: 23px;
  width: 24px;
  height: 24px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(45deg);
}

.crail-wire-body {
  top: 24px;
  left: 18px;
  width: 34px;
  height: 151px;
  border: 1px solid currentColor;
  border-radius: 48% 48% 3px 3px / 22% 22% 3px 3px;
}

.crail-wire-body::before,
.crail-wire-body::after {
  position: absolute;
  right: 5px;
  left: 5px;
  height: 1px;
  background: currentColor;
  content: "";
}

.crail-wire-body::before { top: 43px; }
.crail-wire-body::after { bottom: 31px; }

.crail-wire-fin {
  top: 82px;
  width: 13px;
  height: 99px;
  border: 1px solid currentColor;
  border-radius: 50% 50% 2px 2px / 12% 12% 2px 2px;
}

.crail-wire-fin--left {
  left: 2px;
}

.crail-wire-fin--right {
  right: 2px;
}

.crail-wire-fin::after {
  position: absolute;
  right: 3px;
  bottom: -13px;
  width: 5px;
  height: 13px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.crail-wire-engine {
  top: 175px;
  left: 22px;
  width: 26px;
  height: 24px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: perspective(18px) rotateX(-7deg);
}

.crail-vault-thrust {
  position: absolute;
  z-index: 10;
  top: calc(24% + 198px);
  left: calc(48% + 3px);
  width: 1px;
  height: 174px;
  background: rgba(217, 210, 195, .54);
  transform: rotate(10deg);
  transform-origin: top center;
  animation: crail-vault-thrust 2.4s ease-in-out infinite;
}

.crail-vault-thrust--two {
  left: calc(48% - 5px);
  height: 216px;
  background: rgba(230, 83, 114, .64);
  animation-delay: -.8s;
}

.crail-vault-thrust--three {
  display: none;
}

.crail-rocket-poster.is-activated .crail-rocket-wire--paper,
.crail-rocket-poster.is-activated .crail-rocket-wire--red {
  transform: translateX(-50%) rotate(10deg);
  filter: brightness(1.12);
}

.crail-rocket-poster.is-activated .crail-vault-axis--red {
  transform: rotate(-19deg) skewX(-7deg);
}

@keyframes crail-vault-sun-register {
  0%, 72%, 100% { box-shadow: 4px -3px 0 -1px rgba(230, 83, 114, .7); }
  80%, 86% { box-shadow: 0 0 0 -1px rgba(230, 83, 114, .7); }
}

@keyframes crail-vault-axis-register {
  0%, 72%, 100% { transform: rotate(-19deg) skewX(-7deg) translate(5px, -4px); }
  80%, 86% { transform: rotate(-19deg) skewX(-7deg); }
}

@keyframes crail-vault-rocket-paper {
  0%, 72%, 100% { transform: translate(calc(-50% - 4px), 4px) rotate(10deg); }
  80%, 86% { transform: translate(-50%, -4px) rotate(10deg); }
}

@keyframes crail-vault-rocket-red {
  0%, 72%, 100% { transform: translate(calc(-50% + 4px), -3px) rotate(10deg); }
  80%, 86% { transform: translate(-50%, -4px) rotate(10deg); }
}

@keyframes crail-vault-thrust {
  0%, 100% { opacity: .28; transform: rotate(10deg) scaleY(.82); }
  50% { opacity: .78; transform: rotate(10deg) scaleY(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .constructivist-rail *,
  .constructivist-rail *::before,
  .constructivist-rail *::after {
    animation: none !important;
    transition: none !important;
  }
}