:root {
  /* DESIGN FONT TOKEN TRACE: IBM Plex Sans Condensed** Condensed* Condense* for stamps */
  --carbon-night: #111318;
  --fluorescent-paper: #E8ECE1;
  --cold-file-blue: #7FA7B8;
  --contradiction-red: #D5332E;
  --bruise-violet: #5B3A73;
  --oxidized-green: #5E7560;
  --old-form-yellow: #D8C36A;
  --ink-shadow: #26222A;
  --archivo: "Archivo Black", sans-serif;
  --newsreader: "Newsreader", serif;
  --plex: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--carbon-night); color: var(--fluorescent-paper); scroll-snap-type: y mandatory; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--newsreader);
  background:
    radial-gradient(circle at 18% 12%, rgba(127, 167, 184, .16), transparent 24rem),
    linear-gradient(120deg, var(--carbon-night), var(--ink-shadow) 54%, #0b0d11);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(232, 236, 225, .035) 8px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(127, 167, 184, .045) 44px);
  mix-blend-mode: screen;
}

.contradiction-shift { width: 100%; }

.shift-scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 5rem);
}

.shift-scene::after {
  content: "";
  position: absolute;
  inset: 7vh 50% 7vh auto;
  width: 2px;
  background: linear-gradient(var(--fluorescent-paper), var(--cold-file-blue), var(--contradiction-red));
  opacity: .6;
  transform: rotate(var(--hinge-rotate, 0deg));
  box-shadow: 0 0 26px rgba(232, 236, 225, .28);
  z-index: -1;
}

.shift-card {
  position: fixed;
  right: 1.4rem;
  top: 1.4rem;
  width: 12.2rem;
  height: 7rem;
  z-index: 30;
  padding: .8rem;
  color: var(--carbon-night);
  background: var(--old-form-yellow);
  border: 2px solid var(--ink-shadow);
  font-family: var(--plex);
  text-transform: uppercase;
  transform: rotate(7deg);
  box-shadow: -10px 14px 0 rgba(91, 58, 115, .55), 0 0 0 1px var(--fluorescent-paper) inset;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.shift-card.changed { transform: rotate(-5deg) translateY(8px); }
.card-kicker, .card-time { display: block; font-size: .72rem; letter-spacing: .12em; }
.shift-card strong { display: block; margin: .55rem 0; font-size: 1.05rem; line-height: .95; }

.red-string {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--string-width, 0px);
  height: 2px;
  z-index: 25;
  pointer-events: none;
  background: var(--contradiction-red);
  transform-origin: left center;
  transform: translate(var(--string-x, 50vw), var(--string-y, 50vh)) rotate(var(--string-angle, 0deg));
  box-shadow: 0 0 9px rgba(213, 51, 46, .8);
}

.hero-scene { background: linear-gradient(90deg, #0e1014 0 52%, var(--ink-shadow) 52% 100%); }
.floor-grid { position: absolute; inset: 18vh 4vw 0; opacity: .28; transform: perspective(520px) rotateX(64deg) rotateZ(-7deg); transform-origin: bottom; background-image: linear-gradient(var(--cold-file-blue) 1px, transparent 1px), linear-gradient(90deg, var(--cold-file-blue) 1px, transparent 1px); background-size: 76px 76px; }
.fluorescent-tube { position: absolute; left: 11vw; top: 8vh; width: 38vw; height: 8px; background: var(--fluorescent-paper); box-shadow: 0 0 35px var(--fluorescent-paper), 0 0 110px rgba(127, 167, 184, .58); transform: rotate(-2deg); }

.wall-label { position: absolute; left: 6vw; top: 31vh; font-family: var(--archivo); font-size: clamp(4.2rem, 16vw, 15rem); line-height: .78; letter-spacing: -.07em; text-transform: lowercase; color: var(--fluorescent-paper); text-shadow: 16px 14px 0 rgba(213, 51, 46, .5), -14px -8px 0 rgba(127, 167, 184, .28); }
.wall-label span:last-child { color: transparent; -webkit-text-stroke: 2px var(--fluorescent-paper); }
.contradiction-hinge { clip-path: polygon(0 0, 48% 0, 53% 100%, 0 100%, 0 0, 55% 0, 100% 0, 100% 100%, 51% 100%, 48% 0); }

.reverse-clock { position: absolute; right: 21vw; top: 22vh; width: 9.5rem; aspect-ratio: 1; border-radius: 50%; border: 7px solid var(--fluorescent-paper); background: radial-gradient(circle, var(--ink-shadow) 0 8%, var(--carbon-night) 9%); box-shadow: 0 0 0 12px rgba(127,167,184,.12), -18px 20px 0 rgba(91,58,115,.4); }
.reverse-clock.second { right: 9vw; top: 44vh; transform: scale(.78) rotate(11deg); }
.reverse-clock b { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); font-family: var(--plex); color: var(--old-form-yellow); }
.clock-hand { position: absolute; left: calc(50% - 2px); top: 18%; width: 4px; height: 34%; background: var(--contradiction-red); transform-origin: 50% 94%; animation: clockForward 6s linear infinite; }
.hand-backward { background: var(--cold-file-blue); height: 28%; animation: clockBackward 4.2s linear infinite; }
.slow { animation-duration: 11s; }
.fast { animation-duration: 2.8s; }

.stamp-band { position: absolute; font-family: var(--plex); font-weight: 700; text-transform: uppercase; letter-spacing: .15em; border: 4px solid currentColor; padding: .45rem .8rem; color: var(--old-form-yellow); transform: rotate(-12deg); opacity: .9; mix-blend-mode: hard-light; }
.hero-scene .stamp-band { right: 29vw; bottom: 24vh; }
.stamp-band.red { color: var(--contradiction-red); right: 10vw; top: 14vh; transform: rotate(9deg); }
.stamp-band.final { color: var(--contradiction-red); left: 9vw; bottom: 13vh; transform: rotate(-4deg); }
.impact-stamp.stamped { animation: stampImpact .55s cubic-bezier(.1, 1.4, .38, 1); }

.narrative-copy { position: absolute; right: 7vw; bottom: 11vh; width: min(30rem, 38vw); font-size: clamp(1.25rem, 2vw, 2.2rem); line-height: 1.05; color: var(--fluorescent-paper); }
.receipt-tape { position: absolute; left: 3vw; bottom: 8vh; width: 68vw; padding: .75rem 2rem; font: 700 1rem var(--plex); color: var(--ink-shadow); background: var(--fluorescent-paper); transform: rotate(2deg); white-space: nowrap; box-shadow: 12px 12px 0 rgba(127,167,184,.35); }

.waiting-scene { --hinge-rotate: -10deg; background: linear-gradient(105deg, var(--fluorescent-paper) 0 48%, var(--cold-file-blue) 48% 100%); color: var(--ink-shadow); }
.ruled-half { position: absolute; inset: 0 52% 0 0; background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(38,34,42,.2) 35px), repeating-linear-gradient(90deg, transparent 0 84px, rgba(213,51,46,.18) 85px); }
.diagonal-half { position: absolute; inset: 0 0 0 45%; background: repeating-linear-gradient(135deg, rgba(91,58,115,.34) 0 10px, transparent 11px 42px); transform: skewX(-9deg); }
.scene-title { position: relative; z-index: 3; margin: 0; font-family: var(--archivo); font-size: clamp(4rem, 11vw, 12rem); line-height: .78; letter-spacing: -.055em; text-transform: uppercase; color: var(--ink-shadow); }
.scene-title em { color: var(--contradiction-red); font-style: normal; }
.memo-stack { position: absolute; right: 8vw; top: 19vh; width: min(43vw, 36rem); height: 58vh; transform-style: preserve-3d; transition: transform .35s ease-out; }
.memo { position: absolute; width: 62%; min-height: 13rem; padding: 1rem; background: rgba(232,236,225,.88); border: 2px solid var(--ink-shadow); box-shadow: 11px 14px 0 rgba(38,34,42,.22); font-family: var(--plex); text-transform: uppercase; }
.memo header, .carbon-form header { font: 700 1.1rem var(--plex); letter-spacing: .12em; margin-bottom: 1rem; }
.memo label { display: block; margin: .8rem 0; font-size: 1.2rem; }
.memo input, .checkbox-bank input { accent-color: var(--contradiction-red); transform: scale(1.25); }
.memo-one { left: 0; top: 2rem; transform: rotate(-8deg); }
.memo-two { left: 31%; top: 8rem; transform: rotate(7deg); background: rgba(216,195,106,.92); }
.memo-three { right: 0; bottom: 0; display: grid; place-items: center; background: var(--bruise-violet); color: var(--fluorescent-paper); font: 700 2rem var(--plex); transform: rotate(-15deg); }
.elevator-panel { position: absolute; left: 12vw; bottom: 13vh; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-family: var(--plex); }
.elevator-panel button { width: 5rem; aspect-ratio: 1; border: 3px solid var(--ink-shadow); background: var(--oxidized-green); color: var(--fluorescent-paper); font: 700 1.2rem var(--plex); }
.elevator-panel span { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .15em; }

.assembly-scene { --hinge-rotate: 7deg; background: var(--carbon-night); }
.conveyor { position: absolute; left: -4vw; right: -4vw; top: 48vh; height: 9rem; background: repeating-linear-gradient(90deg, var(--ink-shadow) 0 60px, #0a0b0e 61px 110px); border-block: 5px solid var(--cold-file-blue); transform: rotate(-4deg); }
.side-title { color: var(--fluorescent-paper); width: 44vw; }
.paper-line { position: absolute; left: 35vw; top: 28vh; width: 58vw; height: 44vh; }
.blank-page { position: absolute; width: 17rem; height: 23rem; background: var(--fluorescent-paper); color: var(--ink-shadow); border: 1px solid var(--ink-shadow); box-shadow: 14px 16px 0 rgba(127,167,184,.26); }
.blank-page::before { content: ""; position: absolute; inset: 1.3rem; border: 2px dashed rgba(38,34,42,.32); }
.blank-page span { position: absolute; right: 1rem; top: 1rem; font: 700 .85rem var(--plex); text-transform: uppercase; }
.page-a { left: 0; top: 0; transform: rotate(-8deg); }
.page-b { left: 13rem; top: 4rem; transform: rotate(4deg); background: rgba(127,167,184,.9); }
.page-c { left: 27rem; top: 1rem; transform: rotate(13deg); background: rgba(232,236,225,.7); }
.carbon-form { position: absolute; background: rgba(232,236,225,.92); color: var(--ink-shadow); border: 2px solid var(--ink-shadow); box-shadow: 9px 9px 0 rgba(91,58,115,.38), -7px -5px 0 rgba(127,167,184,.28); font-family: var(--newsreader); }
.split-form { left: 10vw; bottom: 8vh; width: 34rem; padding: 1.2rem; transform: rotate(3deg); }
.progress-row { font-family: var(--plex); text-transform: uppercase; }
.progress-row i { display: block; width: 100%; height: 1.1rem; margin-top: .4rem; background: linear-gradient(270deg, var(--contradiction-red) 0 67%, transparent 67%); border: 1px solid var(--ink-shadow); }

.calendar-scene { background: linear-gradient(90deg, var(--oxidized-green), var(--ink-shadow)); }
.calendar { position: absolute; left: 7vw; top: 11vh; width: 62vw; min-height: 68vh; background: var(--fluorescent-paper); color: var(--ink-shadow); border: 3px solid var(--ink-shadow); transform: rotate(-2deg); box-shadow: 24px 22px 0 rgba(91,58,115,.52); }
.calendar-head { padding: 1rem 1.4rem; background: var(--contradiction-red); color: var(--fluorescent-paper); font: 700 1.5rem var(--plex); letter-spacing: .12em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid > * { min-height: 6.5rem; padding: .65rem; border-right: 1px solid rgba(38,34,42,.48); border-bottom: 1px solid rgba(38,34,42,.48); font-family: var(--plex); text-transform: uppercase; }
.calendar-grid b { min-height: 3rem; background: rgba(127,167,184,.35); }
.torn-note { position: absolute; right: 8vw; top: 17vh; width: 18rem; padding: 1.2rem; background: var(--old-form-yellow); color: var(--ink-shadow); font: 600 1.45rem var(--newsreader); clip-path: polygon(0 0, 100% 4%, 94% 100%, 6% 92%); transform: rotate(11deg); }
.string-label { position: absolute; padding: .35rem .6rem; color: var(--fluorescent-paper); background: var(--contradiction-red); font: 700 1rem var(--plex); text-transform: uppercase; }
.label-a { left: 16vw; bottom: 12vh; }
.label-b { right: 18vw; bottom: 23vh; background: var(--bruise-violet); }
.ghost-title { position: absolute; right: 4vw; bottom: 7vh; color: rgba(232,236,225,.18); -webkit-text-stroke: 1px var(--fluorescent-paper); }

.meeting-scene { background: var(--fluorescent-paper); color: var(--ink-shadow); }
.folded-desk { position: absolute; inset: 15vh 13vw 13vh 13vw; transform: perspective(720px) rotateX(54deg) rotateZ(-8deg); transform-style: preserve-3d; }
.desk-half { position: absolute; top: 0; width: 50%; height: 100%; display: grid; place-items: center; font: 700 9rem var(--archivo); color: rgba(232,236,225,.85); }
.desk-half.yes { left: 0; background: var(--oxidized-green); transform-origin: right; }
.desk-half.no { right: 0; background: var(--bruise-violet); transform-origin: left; }
.desk-shadow { position: absolute; inset: 8% 4%; background: rgba(213,51,46,.28); transform: translateZ(-70px) translate(34px, 30px); }
.desk-shadow.two { background: rgba(127,167,184,.36); transform: translateZ(-90px) translate(-38px, 46px); }
.minutes { left: 6vw; top: 18vh; width: 22rem; padding: 1rem; transform: rotate(8deg); }
.checkbox-bank label { display: block; margin: .65rem 0; font: 500 1.05rem var(--plex); text-transform: uppercase; }
.meeting-title { position: absolute; right: 5vw; bottom: 10vh; color: var(--ink-shadow); text-align: right; }

.archive-scene { background: linear-gradient(135deg, var(--ink-shadow), var(--carbon-night) 58%, #050608); }
.archive-drawer { position: absolute; left: 20vw; top: 22vh; width: 56vw; height: 48vh; transform: perspective(800px) rotateX(18deg) rotateY(-12deg); }
.drawer-face { position: absolute; inset: 28% 0 0; display: grid; place-items: center; background: var(--oxidized-green); border: 5px solid var(--fluorescent-paper); color: var(--fluorescent-paper); font: 700 clamp(3rem, 8vw, 8rem)/.8 var(--archivo); letter-spacing: -.05em; box-shadow: 28px 30px 0 rgba(91,58,115,.5); }
.drawer-face span { font: 700 1.1rem var(--plex); letter-spacing: .18em; text-transform: uppercase; }
.files { position: absolute; left: 7%; right: 7%; top: 0; height: 36%; display: flex; gap: .8rem; align-items: flex-end; }
.files i { flex: 1; height: var(--h, 90%); background: var(--fluorescent-paper); border: 2px solid var(--ink-shadow); transform: rotate(var(--r, -4deg)); box-shadow: 7px 0 0 rgba(127,167,184,.38); }
.files i:nth-child(2) { --h: 72%; --r: 3deg; background: var(--old-form-yellow); }
.files i:nth-child(3) { --h: 106%; --r: -9deg; }
.files i:nth-child(4) { --h: 82%; --r: 7deg; background: var(--cold-file-blue); }
.files i:nth-child(5) { --h: 118%; --r: 11deg; background: var(--fluorescent-paper); }
.final-report { right: 7vw; top: 13vh; width: 19rem; padding: 1rem; transform: rotate(-10deg); }
.final-title { position: absolute; left: 4vw; bottom: 6vh; color: var(--fluorescent-paper); }

.hover-form .status-word { color: var(--contradiction-red); transition: transform .25s ease, color .25s ease; }
.hover-form:hover .status-word { transform: translate(6px, -4px) rotate(-3deg); color: var(--bruise-violet); }
.folded { animation: foldOpen .9s cubic-bezier(.2, .9, .18, 1) both; }
.misregistered { animation: misregister .7s steps(2, end) both; }

@keyframes clockForward { to { transform: rotate(360deg); } }
@keyframes clockBackward { to { transform: rotate(-360deg); } }
@keyframes stampImpact { 0% { transform: rotate(var(--stamp-rot, -12deg)) scale(2.4); opacity: 0; filter: blur(5px); } 65% { transform: rotate(var(--stamp-rot, -12deg)) scale(.92); opacity: 1; filter: blur(0); } 100% { transform: rotate(var(--stamp-rot, -12deg)) scale(1); } }
@keyframes foldOpen { from { clip-path: polygon(47% 0, 53% 0, 53% 100%, 47% 100%); transform: rotateY(22deg) skewY(4deg); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: rotateY(0) skewY(0); } }
@keyframes misregister { 0% { text-shadow: none; } 35% { text-shadow: 8px 0 0 rgba(213,51,46,.6), -8px 0 0 rgba(127,167,184,.55); transform: translateX(-6px); } 70% { text-shadow: -5px 0 0 rgba(213,51,46,.5), 5px 0 0 rgba(127,167,184,.45); transform: translateX(5px); } 100% { text-shadow: 3px 0 0 rgba(213,51,46,.25); transform: translateX(0); } }

@media (max-width: 760px) {
  .shift-scene { padding: 6rem 1rem 2rem; }
  .shift-card { right: .8rem; top: .8rem; transform: rotate(3deg) scale(.86); transform-origin: top right; }
  .wall-label { top: 24vh; left: 1rem; font-size: 22vw; }
  .reverse-clock { right: 8vw; top: 48vh; width: 7rem; }
  .reverse-clock.second { right: 44vw; top: 60vh; }
  .narrative-copy { left: 1rem; right: 1rem; width: auto; bottom: 12vh; }
  .memo-stack, .calendar, .folded-desk, .archive-drawer { left: 1rem; right: 1rem; width: auto; }
  .scene-title { font-size: 19vw; }
  .calendar-grid > * { min-height: 4rem; font-size: .7rem; }
  .paper-line { left: 8vw; top: 42vh; transform: scale(.65); transform-origin: left top; }
  .desk-half { font-size: 20vw; }
}