:root {
  --deep-ink: #1E1711;
  --parchment: #E8D6B5;
  --tea: #B9854A;
  --copper: #7B4A2B;
  --rose: #CFA98D;
  --cyan: #77C7BC;
  --red: #9A3E2D;
  --bone: #F8EED8;
  --commissioner: "Commissioner", Inter, system-ui, sans-serif;
  --fraunces: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", "Space Mono", monospace;
  --compliance-mono-token: "Mono**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--deep-ink); }

body {
  margin: 0;
  font-family: var(--commissioner);
  color: var(--deep-ink);
  background: var(--parchment);
  overflow-x: hidden;
}

button { font: inherit; }

.paper-grain,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.paper-grain {
  opacity: .35;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 12% 22%, rgba(30, 23, 17, .08) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 70% 38%, rgba(185, 133, 74, .12) 0 1px, transparent 1px 9px),
    linear-gradient(110deg, rgba(248, 238, 216, .32), rgba(123, 74, 43, .08));
}

.scanlines {
  opacity: .13;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(30, 23, 17, .25) 8px, transparent 9px);
}

.chain-ribbon {
  position: fixed;
  top: -8vh;
  bottom: -8vh;
  left: 50%;
  width: 2px;
  z-index: 18;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--copper), var(--tea), var(--red), var(--cyan), var(--copper), transparent);
  filter: drop-shadow(8px 0 0 rgba(119, 199, 188, .18)) drop-shadow(-5px 0 0 rgba(154, 62, 45, .16));
  transform: translateX(-50%) skewX(-4deg);
}

.chain-ribbon.fractured {
  animation: chainFracture .62s steps(4, end);
}

.chain-node {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--copper);
  background: rgba(248, 238, 216, .65);
  transform: translate(-50%, -50%) rotate(5deg);
  box-shadow: 0 10px 30px rgba(30, 23, 17, .12);
}

.node-a { top: 14%; border-radius: 54% 46% 43% 57%; }
.node-b { top: 39%; border-radius: 8px; }
.node-c { top: 64%; border-radius: 48% 52% 35% 65%; }
.node-d { top: 88%; border-radius: 4px 18px 8px 14px; }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(24px, 5vw, 76px);
  display: grid;
  place-items: center;
}

.dawn {
  background:
    radial-gradient(circle at 16% 14%, rgba(248, 238, 216, .95), transparent 30%),
    linear-gradient(140deg, var(--bone), var(--parchment) 55%, var(--rose));
}

.noon {
  background:
    linear-gradient(90deg, rgba(123, 74, 43, .13) 1px, transparent 1px),
    radial-gradient(circle at 62% 38%, rgba(119, 199, 188, .18), transparent 26%),
    var(--parchment);
  background-size: 72px 100%, auto, auto;
}

.dusk {
  background:
    radial-gradient(circle at 76% 50%, rgba(154, 62, 45, .28), transparent 33%),
    linear-gradient(160deg, var(--parchment), var(--rose) 48%, var(--tea));
}

.midnight {
  color: var(--bone);
  background:
    radial-gradient(circle at 22% 18%, rgba(119, 199, 188, .13), transparent 24%),
    radial-gradient(circle at 68% 68%, rgba(185, 133, 74, .22), transparent 32%),
    var(--deep-ink);
}

.act-word {
  position: absolute;
  inset: auto auto 8vh -3vw;
  font-size: clamp(5.8rem, 18vw, 19rem);
  line-height: .74;
  font-weight: 900;
  letter-spacing: -.09em;
  color: rgba(30, 23, 17, .11);
  white-space: nowrap;
  text-transform: uppercase;
  z-index: -1;
}

.glitch-title {
  top: 3vh;
  bottom: auto;
  text-transform: none;
  color: rgba(30, 23, 17, .2);
  text-shadow: 8px 0 rgba(119, 199, 188, .22), -5px 0 rgba(154, 62, 45, .18);
}

.split-word,
.fork-word,
.archive-word { right: -6vw; left: auto; }
.fork-word { color: rgba(154, 62, 45, .18); }
.archive-word { color: rgba(248, 238, 216, .1); }

.paper-plaque {
  width: min(620px, 82vw);
  position: relative;
  z-index: 12;
  padding: clamp(24px, 4vw, 54px);
  background: rgba(248, 238, 216, .74);
  border: 1px solid rgba(123, 74, 43, .42);
  box-shadow: 0 24px 70px rgba(30, 23, 17, .18);
  clip-path: polygon(2% 4%, 96% 0, 100% 92%, 91% 100%, 4% 97%, 0 12%);
  transform: translateY(36px) rotate(-1deg);
  opacity: .5;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2, .75, .15, 1);
}

.active .paper-plaque,
.paper-plaque.is-visible { opacity: 1; transform: translateY(0) rotate(-1deg); }

.plaque-large { margin-left: -28vw; margin-top: 12vh; }
.plaque-offset { margin-left: 28vw; transform: translateY(32px) rotate(1.5deg); }
.plaque-dusk { margin-left: -18vw; transform: translateY(32px) rotate(-2.2deg); }
.plaque-night {
  background: rgba(30, 23, 17, .68);
  border-color: rgba(248, 238, 216, .26);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
}

.warning { color: var(--red); }

h1, h2 {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 5vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.055em;
}

p {
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.65;
  font-weight: 300;
}

.paper-plaque p:last-child { margin-bottom: 0; }

.skeleton-stack { display: grid; gap: 10px; margin-bottom: 28px; }
.skeleton-stack span {
  height: 13px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(248, 238, 216, .35), var(--bone), rgba(185, 133, 74, .22));
  background-size: 250% 100%;
  animation: shimmer 2.5s infinite linear;
}
.skeleton-stack span:nth-child(2) { width: 72%; }
.skeleton-stack span:nth-child(3) { width: 46%; }
.night-loader span { background: linear-gradient(90deg, rgba(248, 238, 216, .1), rgba(119, 199, 188, .35), rgba(248, 238, 216, .14)); background-size: 250% 100%; }

.blob {
  position: absolute;
  width: clamp(190px, 30vw, 460px);
  height: clamp(170px, 28vw, 410px);
  border-radius: 60% 40% 45% 55% / 47% 58% 42% 53%;
  filter: blur(.2px);
  mix-blend-mode: multiply;
  transition: border-radius 700ms ease, transform 900ms ease;
}

.blob.is-block,
.blob:hover { border-radius: 10px; transform: rotate(3deg) scale(.92); }

.tea { right: 12vw; top: 24vh; background: rgba(185, 133, 74, .38); }
.copper { left: 8vw; bottom: 10vh; background: rgba(123, 74, 43, .22); }
.rose { right: 8vw; bottom: 18vh; background: rgba(207, 169, 141, .62); }
.midnight-blob { left: 12vw; top: 14vh; background: rgba(185, 133, 74, .26); mix-blend-mode: screen; }
.pulse-blob { animation: blobPulse 4.6s ease 1 .4s; }

.hash-stamps,
.mono-ladder {
  position: absolute;
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  display: grid;
  gap: 12px;
  color: rgba(30, 23, 17, .62);
}

.hash-stamps { right: 7vw; bottom: 12vh; transform: rotate(2deg); }
.mono-ladder { left: 10vw; top: 16vh; }

.hash-stamps span,
.mono-ladder span {
  padding: 8px 12px;
  background: rgba(248, 238, 216, .35);
  border: 1px dashed rgba(123, 74, 43, .35);
}

.seal-button,
.slit {
  position: absolute;
  z-index: 20;
  border: 1px solid var(--copper);
  background: var(--red);
  color: var(--bone);
  border-radius: 50%;
  width: 104px;
  height: 104px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: var(--mono);
  font-size: .68rem;
  box-shadow: inset 0 0 0 8px rgba(248, 238, 216, .08), 0 18px 38px rgba(30, 23, 17, .2);
}

.seal-button { left: 12vw; bottom: 14vh; }
.seal-button:active { transform: scale(.94); }

.collage {
  position: absolute;
  z-index: 8;
  background: rgba(248, 238, 216, .52);
  border: 1px solid rgba(123, 74, 43, .3);
  box-shadow: 0 18px 44px rgba(30, 23, 17, .12);
}

.receipt-one {
  width: 190px;
  height: 250px;
  right: 12vw;
  top: 14vh;
  padding: 28px;
  transform: rotate(8deg);
  clip-path: polygon(0 0, 100% 5%, 94% 100%, 8% 94%);
  font-family: var(--mono);
}
.receipt-one strong { display: block; font-family: var(--fraunces); font-size: 3.1rem; color: var(--tea); margin-top: 22px; }

.leaf-fragment {
  left: 14vw;
  top: 20vh;
  width: 150px;
  height: 320px;
  background: linear-gradient(70deg, transparent 45%, rgba(123, 74, 43, .52) 46% 49%, transparent 50%), rgba(248, 238, 216, .28);
  border-radius: 80% 20% 70% 30%;
  transform: rotate(-22deg);
}

.fork-path {
  position: absolute;
  top: 18vh;
  height: 64vh;
  width: 2px;
  background: linear-gradient(var(--red), var(--cyan), var(--copper));
  opacity: .3;
  transform-origin: top;
  transition: transform 900ms ease, opacity 900ms ease;
}
.path-left { left: 50%; transform: rotate(-12deg); }
.path-right { left: 50%; transform: rotate(14deg); }
.dusk.active .path-left,
.dusk.active .path-right { opacity: .7; }

.ledger-tear {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  padding: 12px;
  font-family: var(--mono);
  text-align: center;
  color: var(--bone);
  background: repeating-linear-gradient(90deg, rgba(154, 62, 45, .82) 0 18px, rgba(119, 199, 188, .52) 19px 25px, rgba(30, 23, 17, .12) 26px 44px);
  transform: skewY(-1deg);
  mix-blend-mode: multiply;
}

.archive-slits {
  position: absolute;
  right: 9vw;
  bottom: 15vh;
  display: flex;
  gap: 18px;
}
.archive-slits .slit {
  position: static;
  width: 88px;
  height: 88px;
  background: transparent;
  border-color: rgba(248, 238, 216, .42);
  box-shadow: inset 0 0 0 1px rgba(119, 199, 188, .18);
}
.archive-slits .slit.open { background: rgba(119, 199, 188, .18); color: var(--bone); }

.slit-copy {
  position: absolute;
  right: 9vw;
  bottom: 7vh;
  width: min(470px, 80vw);
  font-family: var(--fraunces);
  color: var(--bone);
  text-align: right;
}

@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes blobPulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.12) rotate(2deg); } }
@keyframes chainFracture {
  0%, 100% { transform: translateX(-50%) skewX(-4deg); opacity: 1; }
  25% { transform: translateX(calc(-50% - 18px)) skewX(14deg); opacity: .65; }
  50% { transform: translateX(calc(-50% + 22px)) skewX(-18deg); opacity: .9; }
  75% { transform: translateX(calc(-50% - 8px)) skewX(9deg); opacity: .45; }
}

@media (max-width: 760px) {
  .chain-ribbon { left: 16vw; }
  .plaque-large, .plaque-offset, .plaque-dusk { margin-left: 0; }
  .hash-stamps, .mono-ladder, .receipt-one, .leaf-fragment { display: none; }
  .act-word { font-size: 22vw; }
  .seal-button { left: auto; right: 8vw; bottom: 8vh; }
  .archive-slits { right: auto; left: 8vw; bottom: 16vh; }
  .slit-copy { left: 8vw; right: auto; text-align: left; }
}