:root {
  /* Typography apparatus: IBM Plex Serif** Serif* Seri Serifff for equations. */
  --parchment: #F3E2BE;
  --vellum: #D8B982;
  --walnut: #3A2415;
  --graphite: #5B4630;
  --brass: #A06A2A;
  --rose: #B65A4A;
  --lamp: #F6C76A;
  --blue: #263B4A;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body: "Libre Baskerville", Baskerville, Georgia, serif;
  --hand: Caveat, "Bradley Hand", "Segoe Print", cursive;
  --tech: Spectral, "IBM Plex Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--walnut);
  font-family: var(--body);
  background:
    radial-gradient(circle at 12% 18%, rgba(246, 199, 106, .55), transparent 16rem),
    radial-gradient(circle at 70% 8%, rgba(246, 199, 106, .35), transparent 18rem),
    radial-gradient(circle at 82% 78%, rgba(38, 59, 74, .22), transparent 20rem),
    linear-gradient(115deg, #3A2415 0%, #5B4630 42%, #263B4A 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(58, 36, 21, .18) 8px),
    repeating-linear-gradient(90deg, rgba(243, 226, 190, .06) 0 1px, transparent 1px 12px);
  mix-blend-mode: multiply;
}

.lamp-field {
  position: fixed;
  inset: -12vh -12vw;
  pointer-events: none;
  filter: blur(1px);
  background:
    radial-gradient(circle at 8% 25%, rgba(246, 199, 106, .46) 0 1.2rem, transparent 1.3rem),
    radial-gradient(circle at 28% 74%, rgba(246, 199, 106, .28) 0 2rem, transparent 2.1rem),
    radial-gradient(circle at 54% 12%, rgba(243, 226, 190, .34) 0 1.6rem, transparent 1.7rem),
    radial-gradient(circle at 80% 45%, rgba(246, 199, 106, .34) 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 92% 82%, rgba(216, 185, 130, .42) 0 1.1rem, transparent 1.2rem);
  animation: lampDrift 18s ease-in-out infinite alternate;
}

@keyframes lampDrift { to { transform: translate3d(3vw, -2vh, 0) scale(1.04); } }

.scroll-meter {
  position: fixed;
  z-index: 20;
  left: 1.5rem;
  right: 1.5rem;
  top: 1rem;
  height: 4px;
  background: rgba(243, 226, 190, .28);
  border-radius: 10rem;
  box-shadow: 0 0 18px rgba(246, 199, 106, .35);
}

.scroll-meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lamp), var(--rose), var(--blue));
  border-radius: inherit;
}

.manuscript-stage { height: 620vh; }

.sticky-desk {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1200px;
}

.accordion {
  position: relative;
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.accordion::before {
  content: "";
  position: absolute;
  inset: 8vh 2vw 7vh;
  width: calc(600vw - 4vw);
  background:
    linear-gradient(90deg, rgba(58, 36, 21, .08) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(0deg, rgba(58, 36, 21, .06) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(circle at 20% 20%, rgba(246, 199, 106, .22), transparent 17rem),
    linear-gradient(90deg, var(--parchment), #F0D8AA 32%, var(--parchment) 66%, #E7C991);
  border: 1px solid rgba(58, 36, 21, .22);
  box-shadow: 0 2rem 5rem rgba(21, 12, 5, .42), inset 0 0 4rem rgba(160, 106, 42, .23);
}

.light-beam {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 48%;
  width: 600vw;
  height: 18rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.light-beam path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 24 18;
  filter: drop-shadow(0 0 12px rgba(246, 199, 106, .75));
}

.folio {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
}

.folio-paper {
  position: relative;
  z-index: 8;
  width: min(78vw, 980px);
  min-height: 64vh;
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 10% 10%, rgba(246, 199, 106, .28), transparent 12rem),
    repeating-linear-gradient(178deg, rgba(91, 70, 48, .06) 0 1px, transparent 1px 13px),
    var(--parchment);
  border: 1px solid rgba(58, 36, 21, .34);
  box-shadow: 0 1.4rem 3.4rem rgba(58, 36, 21, .32), inset 0 0 2.5rem rgba(160, 106, 42, .18);
  transform: rotate(var(--tilt, -.6deg));
}

.platform-folio .folio-paper, .gravity-folio .folio-paper { --tilt: .9deg; }
.clocks-folio .folio-paper { --tilt: -1.1deg; }
.light-folio .folio-paper { --tilt: .4deg; }
.quest-folio .folio-paper { --tilt: -0.3deg; }

.folio-paper::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, transparent 50%, rgba(160, 106, 42, .24) 51%);
  border-bottom: 1px solid rgba(58,36,21,.25);
  border-right: 1px solid rgba(58,36,21,.25);
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  margin: 0 0 1.4rem;
  color: var(--walnut);
}

h1 {
  font-size: clamp(4.4rem, 12vw, 12rem);
  letter-spacing: -.055em;
  text-shadow: .06em .06em 0 rgba(160, 106, 42, .16);
}

h2 { font-size: clamp(3rem, 7vw, 7.6rem); max-width: 9ch; }

p {
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.8;
  max-width: 42rem;
}

.kicker, .chapter-label {
  font-family: var(--tech);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brass);
  font-size: .8rem;
}

.opening-line { font-size: clamp(1.2rem, 2vw, 1.8rem); max-width: 55rem; }

.stamp, .final-stamp {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .7rem 1rem;
  font-family: var(--tech);
  color: var(--rose);
  border: 2px solid var(--rose);
  transform: rotate(-4deg);
  text-transform: uppercase;
  letter-spacing: .11em;
  background: rgba(243, 226, 190, .62);
}

.corner-note, .margin-note, .paper-slip, .folio-end-note {
  font-family: var(--hand);
  color: var(--rose);
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
}

.corner-note {
  position: absolute;
  right: 5%;
  top: 14%;
  transform: rotate(9deg);
}

.margin-note { position: absolute; z-index: 12; }
.note-one { right: 8%; bottom: 16%; transform: rotate(-8deg); }
.note-two { right: 11%; top: 17%; transform: rotate(10deg); }
.note-three { left: 10%; bottom: 12%; transform: rotate(-7deg); }

.paper-slip {
  position: absolute;
  z-index: 13;
  width: min(24rem, 34vw);
  padding: 1.2rem 1.4rem;
  background: rgba(216, 185, 130, .92);
  border: 1px solid rgba(58, 36, 21, .28);
  box-shadow: 0 1rem 2rem rgba(58, 36, 21, .25);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s;
}

.paper-slip b, .paper-slip span, .paper-slip em { display: block; }
.paper-slip b { font-family: var(--tech); font-size: .9rem; color: var(--blue); }
.paper-slip span { font-family: var(--tech); color: var(--walnut); margin: .7rem 0; }
.paper-slip em { font-size: 1.2rem; color: var(--rose); }

.tilted { right: 6vw; top: 17vh; transform: rotate(7deg) translateY(20px); }
.ribbon-slip { left: 7vw; bottom: 13vh; transform: rotate(-7deg) translateY(20px); }
.theorem-slip { right: 9vw; bottom: 16vh; transform: rotate(5deg) translateY(20px); }
.correction-slip { right: 8vw; top: 13vh; transform: rotate(-5deg) translateY(20px); }
.paper-slip.is-awake { transform: rotate(var(--awake-tilt, 0deg)) translateY(0); }
.tilted.is-awake { --awake-tilt: -3deg; }
.ribbon-slip.is-awake { --awake-tilt: 4deg; }
.theorem-slip.is-awake { --awake-tilt: -2deg; }
.correction-slip.is-awake { --awake-tilt: 3deg; }

.bookmark-rail {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 1rem;
  display: flex;
  gap: .45rem;
  transform: translateX(-50%);
  padding: .45rem;
  background: rgba(58, 36, 21, .38);
  border: 1px solid rgba(243, 226, 190, .28);
  border-radius: 999px;
  backdrop-filter: blur(5px);
}

.bookmark-rail button {
  border: 0;
  padding: .62rem .85rem;
  color: var(--walnut);
  background: var(--vellum);
  font-family: var(--tech);
  border-radius: 999px 999px .35rem .35rem;
  box-shadow: inset 0 -6px 0 rgba(160, 106, 42, .25);
  cursor: pointer;
}

.bookmark-rail button.active { background: var(--lamp); color: var(--blue); transform: translateY(-.35rem); }

.vellum-window {
  position: relative;
  height: 13rem;
  margin-top: 2rem;
  overflow: hidden;
  background: rgba(243, 226, 190, .46);
  border: 2px solid rgba(160, 106, 42, .44);
}

.train-sketch {
  position: absolute;
  left: 8%;
  top: 34%;
  width: 26rem;
  height: 5rem;
  border: 4px solid var(--graphite);
  border-radius: 2rem .8rem .8rem 1.2rem;
  background: rgba(216, 185, 130, .32);
  transition: transform .2s linear;
}

.train-sketch::before, .train-sketch::after {
  content: "";
  position: absolute;
  bottom: -1.4rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--graphite);
  border-radius: 50%;
  background: var(--parchment);
}
.train-sketch::before { left: 3rem; }
.train-sketch::after { right: 3rem; }
.train-sketch span { display: inline-block; width: 4rem; height: 2rem; margin: 1.2rem .7rem; border: 3px solid var(--blue); border-radius: .4rem; }

.clock-lab { display: flex; gap: 3rem; margin: 2rem 0; }
.clock {
  position: relative;
  width: 11rem;
  height: 11rem;
  border: 5px double var(--graphite);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,199,106,.24), transparent 55%), var(--parchment);
  box-shadow: inset 0 0 0 1rem rgba(216,185,130,.22);
}
.clock::before { content: ""; position: absolute; inset: 48%; border-radius: 50%; background: var(--rose); }
.clock i, .clock b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4rem; background: var(--walnut); transform-origin: 50% 0; border-radius: 4px; }
.clock b { height: 3rem; background: var(--blue); }

.self-writing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--hand);
  font-size: clamp(2rem, 5vw, 4.8rem);
  color: var(--rose);
  border-right: 3px solid var(--rose);
  transition: width 1.2s steps(10);
}
.self-writing.written { width: 12ch; }

.cone-plate { position: relative; width: 22rem; height: 22rem; margin: 1rem auto; border: 2px dashed var(--brass); border-radius: 50%; }
.cone { position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 6rem solid transparent; border-right: 6rem solid transparent; opacity: .7; }
.cone-top { bottom: 50%; border-bottom: 9rem solid rgba(38, 59, 74, .42); }
.cone-bottom { top: 50%; border-top: 9rem solid rgba(182, 90, 74, .38); }
.cone-plate span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font: 700 4rem var(--display); color: var(--walnut); }

.warped-grid {
  position: relative;
  width: min(34rem, 80%);
  height: 22rem;
  margin: 1.4rem auto;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(38,59,74,.32) 0 2px, transparent 2px 28px),
    linear-gradient(90deg, rgba(38,59,74,.28) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(38,59,74,.22) 1px, transparent 1px) 0 0 / 32px 32px;
  border-radius: 50%;
  transform: perspective(500px) rotateX(58deg);
  filter: drop-shadow(0 1.5rem 1.2rem rgba(58,36,21,.28));
}
.warped-grid span { position: absolute; left: 50%; top: 50%; width: 6rem; height: 6rem; background: var(--walnut); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 2rem rgba(58,36,21,.55); }

.constellation { position: relative; height: 18rem; margin-top: 2rem; }
.constellation::before { content: "?"; position: absolute; left: 45%; top: 28%; font: 700 8rem var(--display); color: rgba(38,59,74,.45); }
.constellation span { position: absolute; width: .85rem; height: .85rem; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 1rem var(--lamp); }
.constellation span:nth-child(1) { left: 10%; top: 40%; }
.constellation span:nth-child(2) { left: 24%; top: 12%; }
.constellation span:nth-child(3) { left: 38%; top: 60%; }
.constellation span:nth-child(4) { left: 58%; top: 26%; }
.constellation span:nth-child(5) { left: 76%; top: 52%; }
.constellation span:nth-child(6) { left: 88%; top: 18%; }

.pressed-leaf {
  position: absolute;
  right: 14vw;
  bottom: 18vh;
  width: 4rem;
  height: 8rem;
  background: rgba(160, 106, 42, .38);
  border-radius: 80% 0 80% 0;
  transform: rotate(32deg);
  z-index: 10;
}
.folio-end-note { position: absolute; right: 11vw; top: 18vh; transform: rotate(7deg); z-index: 12; }

.is-current .folio-paper { box-shadow: 0 1.6rem 4rem rgba(58, 36, 21, .38), 0 0 4rem rgba(246, 199, 106, .22), inset 0 0 2.5rem rgba(160, 106, 42, .18); }

@media (max-width: 760px) {
  .folio { padding: 8vh 4vw 13vh; }
  .folio-paper { width: 88vw; min-height: 68vh; padding: 2rem; }
  h1 { font-size: 4.2rem; }
  h2 { font-size: 3.2rem; }
  .paper-slip { width: 54vw; font-size: 1.5rem; }
  .bookmark-rail { max-width: 94vw; overflow: hidden; }
  .bookmark-rail button { padding: .55rem .45rem; font-size: .7rem; }
  .clock-lab { gap: 1rem; }
  .clock { width: 8rem; height: 8rem; }
}