:root {
  --wet-concrete: #8F969B;
  --deep-graphite: #171A1D;
  --archive-paper: #E5E0D3;
  --cold-chalk: #F3F5F4;
  --blue-black: #243447;
  --marginal-pencil: #B8BEC2;
  --bookmark: #6F7F7A;
  --display: "Space Grotesk", system-ui, sans-serif;
  --serif: "Noto Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

@keyframes graphite-settle {
  from { opacity: .96; transform: translateY(-.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

* { box-sizing: border-box; }

html { background: var(--wet-concrete); scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-graphite);
  background:
    radial-gradient(circle at 18% 12%, rgba(243,245,244,.18), transparent 28vw),
    linear-gradient(90deg, rgba(23,26,29,.08) 1px, transparent 1px),
    linear-gradient(180deg, var(--wet-concrete), #7f878c 48%, var(--marginal-pencil));
  background-size: auto, 8.333vw 100%, auto;
  font-family: var(--serif);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(23,26,29,.22) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(243,245,244,.2) 0 .8px, transparent 1.2px);
  background-size: 23px 29px, 17px 19px;
  mix-blend-mode: multiply;
}

.construction-lines {
  position: fixed;
  inset: 0 5vw;
  pointer-events: none;
  z-index: 2;
  border-left: 2px solid rgba(23,26,29,.23);
  border-right: 2px solid rgba(23,26,29,.23);
}

.construction-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(23,26,29,.13);
}
.construction-lines span:nth-child(1) { left: 16.66%; }
.construction-lines span:nth-child(2) { left: 33.33%; }
.construction-lines span:nth-child(3) { left: 50%; }
.construction-lines span:nth-child(4) { left: 66.66%; }
.construction-lines span:nth-child(5) { left: 83.33%; }
.construction-lines span:nth-child(6) { left: 91.66%; }

.folio-rail {
  position: fixed;
  left: 1.4rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2.2rem;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--blue-black);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rail-mark, .rail-chapter { writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-progress { width: 2px; background: rgba(23,26,29,.22); justify-self: center; position: relative; }
.rail-progress i { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--bookmark); transition: height .12s linear; }

.plate {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  padding: 7vw 7vw 6vw 9vw;
  border-bottom: 3px solid rgba(23,26,29,.55);
  isolation: isolate;
}

.plate::before {
  content: "";
  position: absolute;
  inset: 3.2rem 5vw;
  border-top: 1px solid rgba(23,26,29,.38);
  border-bottom: 1px solid rgba(23,26,29,.25);
  pointer-events: none;
}

.hero { min-height: 118vh; place-items: center; background: var(--wet-concrete); }

.margin-note, .mono, .call-number, .plate-label, .final-meta, .colophon-stamp {
  font-family: var(--mono);
  color: var(--blue-black);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.margin-note { position: absolute; top: 2rem; right: 7vw; font-size: .72rem; }

.block-panels {
  width: min(82vw, 1120px);
  height: 56vh;
  display: grid;
  grid-template-columns: 1fr .72fr 1fr;
  gap: 1.2vw;
  transform: translateY(calc(var(--scroll, 0) * -18vh));
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--deep-graphite);
  box-shadow: inset 0 0 0 2px rgba(243,245,244,.08), 1.2rem 1.2rem 0 rgba(36,52,71,.18);
  transition: transform .2s linear;
  animation: graphite-settle 1.2s ease-out both;
}

.panel-a { transform: translateX(calc(var(--scroll, 0) * -16vw)); }
.panel-v { transform: translateY(calc(var(--scroll, 0) * 14vh)); clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
.panel-b { transform: translateX(calc(var(--scroll, 0) * 16vw)); }

.panel span {
  position: absolute;
  inset: -11vh -2vw;
  display: grid;
  place-items: center;
  font: 700 clamp(16rem, 39vw, 39rem)/.7 var(--display);
  letter-spacing: -.12em;
  color: var(--wet-concrete);
  mix-blend-mode: screen;
  opacity: .96;
}

.revealed-line {
  position: absolute;
  width: min(760px, 72vw);
  left: 18vw;
  bottom: 22vh;
  margin: 0;
  font: 500 clamp(2rem, 5vw, 5.4rem)/1.05 var(--serif);
  color: var(--archive-paper);
  opacity: calc(var(--scroll, 0) * 1.3);
  transform: translateY(calc((1 - var(--scroll, 0)) * 5vh));
}

.registration-cross { position: absolute; width: 42px; height: 42px; opacity: .55; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--blue-black); }
.registration-cross::before { left: 20px; top: 0; bottom: 0; width: 2px; }
.registration-cross::after { top: 20px; left: 0; right: 0; height: 2px; }
.cross-one { left: 12vw; top: 18vh; }
.cross-two { right: 9vw; bottom: 12vh; }

.void { background: linear-gradient(135deg, var(--marginal-pencil), var(--wet-concrete)); align-items: center; }
.plate-label {
  position: absolute;
  left: 8vw;
  top: 8vh;
  font: 700 clamp(5rem, 18vw, 18rem)/.78 var(--display);
  color: rgba(23,26,29,.16);
  letter-spacing: -.08em;
}

.v-valley { position: absolute; inset: 8vh 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 0; opacity: .92; }
.v-valley > div { background: var(--blue-black); border: 2px solid rgba(229,224,211,.35); }
.valley-left { clip-path: polygon(0 0, 100% 0, 54% 100%, 0 100%); transform: translateX(calc(var(--local, 0) * -5vw)); }
.valley-right { clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 100%); transform: translateX(calc(var(--local, 0) * 5vw)); }

.essay { position: relative; z-index: 3; max-width: 520px; padding: 1.6rem; background: rgba(229,224,211,.72); border: 2px solid var(--deep-graphite); box-shadow: .8rem .8rem 0 rgba(23,26,29,.18); }
.essay h1 { margin: .8rem 0 1rem; font: 700 clamp(2.2rem, 5.4vw, 5.6rem)/.86 var(--display); letter-spacing: -.07em; color: var(--deep-graphite); }
.essay p { margin: 0; font: 500 clamp(1rem, 1.28vw, 1.28rem)/1.55 var(--serif); color: var(--blue-black); }
.void-essay { margin-left: auto; margin-right: 8vw; transform: translateY(calc((1 - var(--local, 0)) * 4vh)); }
.call-number { position: absolute; left: 12vw; bottom: 12vh; padding: .7rem; border: 2px solid var(--deep-graphite); background: var(--archive-paper); font-size: .82rem; }

.spine { background: var(--archive-paper); grid-template-columns: 1fr 18vw 1fr; align-items: center; }
.decision-spine { height: 86vh; width: clamp(70px, 10vw, 140px); justify-self: center; background: var(--bookmark); border-left: 4px solid var(--deep-graphite); border-right: 4px solid var(--deep-graphite); display: grid; place-items: center; transform: scaleY(calc(.55 + var(--local, 0) * .45)); transform-origin: top; }
.decision-spine span { writing-mode: vertical-rl; font: 700 1rem var(--display); text-transform: uppercase; letter-spacing: .18em; color: var(--cold-chalk); }
.book-stack { display: grid; gap: .9rem; align-self: end; padding-bottom: 14vh; }
.book-stack i, .bibliography i { display: block; height: 1.4rem; background: var(--wet-concrete); border: 2px solid var(--deep-graphite); box-shadow: .35rem .35rem 0 rgba(23,26,29,.14); }
.book-stack i:nth-child(1) { width: 68%; } .book-stack i:nth-child(2) { width: 88%; } .book-stack i:nth-child(3) { width: 58%; } .book-stack i:nth-child(4) { width: 76%; } .book-stack i:nth-child(5) { width: 94%; }
.spine-essay { justify-self: end; }
.page-fold { position: absolute; right: 0; top: 0; width: 18vw; height: 18vw; background: linear-gradient(135deg, transparent 50%, var(--cold-chalk) 50%); border-left: 2px solid rgba(23,26,29,.35); }

.index { background: var(--blue-black); color: var(--archive-paper); align-items: end; }
.index-wall { position: absolute; top: 9vh; right: 7vw; bottom: 9vh; width: 32vw; display: grid; grid-template-rows: repeat(26, 1fr); }
.index-wall span { font: 500 .72rem var(--mono); color: var(--archive-paper); border-top: 1px solid rgba(229,224,211,.26); padding-left: calc(var(--local, 0) * 5vw); }
.bibliography { width: 46vw; display: grid; gap: 1.2rem; padding-bottom: 8vh; }
.bibliography i { height: clamp(1.5rem, 4vh, 3rem); background: var(--marginal-pencil); }
.bibliography i:nth-child(odd) { width: 78%; } .bibliography i:nth-child(even) { width: 58%; margin-left: 8vw; }
.index-essay { position: absolute; left: 13vw; top: 16vh; background: rgba(23,26,29,.72); color: var(--archive-paper); border-color: var(--archive-paper); }
.index-essay h1, .index-essay p, .index-essay .mono { color: var(--archive-paper); }

.commit { min-height: 112vh; background: var(--deep-graphite); place-items: center; color: var(--cold-chalk); }
.commit-block { position: absolute; width: 64vw; height: 42vh; background: var(--wet-concrete); border: 3px solid var(--archive-paper); transform: scaleX(calc(1 - var(--local, 0) * .84)); transition: transform .1s linear; }
.commit-block::after { content: ""; position: absolute; left: 50%; top: -16vh; bottom: -16vh; width: 3px; background: var(--bookmark); }
.final-line { position: relative; z-index: 4; margin: 0; max-width: 760px; text-align: center; font: 500 clamp(2.1rem, 5.6vw, 6rem)/1.04 var(--serif); color: var(--archive-paper); opacity: calc(var(--local, 0) * 1.4 - .18); }
.final-meta { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); font-size: .75rem; color: var(--marginal-pencil); white-space: nowrap; }
.colophon-stamp { position: absolute; right: 12vw; top: 16vh; width: 5rem; height: 5rem; display: grid; place-items: center; border: 2px solid var(--bookmark); color: var(--bookmark); text-align: center; }

@media (max-width: 760px) {
  .folio-rail { display: none; }
  .plate { padding: 6rem 1.3rem 4rem; }
  .block-panels { width: 92vw; grid-template-columns: 1fr; height: 72vh; }
  .panel span { font-size: 15rem; }
  .revealed-line { left: 1.5rem; width: 80vw; bottom: 10vh; }
  .spine { grid-template-columns: 1fr; gap: 2rem; }
  .decision-spine { position: absolute; right: 1.5rem; }
  .index-wall { width: 26vw; right: 1rem; }
  .bibliography { width: 82vw; }
}