:root {
  /* compliance text: IBM Plex Mono characters typing a subtitle beneath it: “notes from a terminal-lit study.” Let the cursor blink in amber IBM Plex Mono* Mono** for typed annotations */
  --cream: #F5E8CF;
  --parchment: #D9BD8C;
  --ink: #3B2417;
  --rust: #A44A2F;
  --amber: #FFB84D;
  --green: #63FF9A;
  --espresso: #1B120D;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --serif: "Libre Baskerville", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--espresso);
  font-family: var(--serif);
  overflow-x: hidden;
}

.paper-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 184, 77, .28), transparent 28%),
    radial-gradient(circle at 82% 58%, rgba(99, 255, 154, .16), transparent 24%),
    linear-gradient(90deg, rgba(59, 36, 23, .05) 1px, transparent 1px),
    linear-gradient(rgba(59, 36, 23, .045) 1px, transparent 1px),
    var(--cream);
  background-size: auto, auto, 42px 42px, 100% 31px, auto;
}

.paper-field::before,
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(var(--ink) .45px, transparent .45px),
    radial-gradient(var(--rust) .35px, transparent .35px);
  background-size: 9px 11px, 13px 17px;
  mix-blend-mode: multiply;
}

.bookmark-nav {
  position: fixed;
  left: 0;
  top: 12vh;
  z-index: 10;
  display: grid;
  gap: .55rem;
}

.bookmark {
  width: 5.8rem;
  padding: .75rem .55rem .75rem 1.05rem;
  color: var(--ink);
  background: linear-gradient(90deg, var(--parchment), #F5E8CF 72%);
  border: 1px solid rgba(59, 36, 23, .35);
  border-left: 0;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  box-shadow: 0 7px 20px rgba(27, 18, 13, .18);
  transform: translateX(-.55rem);
  transition: transform .35s ease, box-shadow .35s ease, color .35s ease;
}

.bookmark:hover,
.bookmark.active {
  color: var(--rust);
  transform: translateX(0);
  box-shadow: 0 0 18px rgba(255, 184, 77, .45), 0 9px 24px rgba(27, 18, 13, .18);
}

.manuscript { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 8vw 9vw 6vw 12vw;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(245, 232, 207, .93), rgba(217, 189, 140, .62)),
    var(--cream);
  box-shadow: inset 0 0 90px rgba(27, 18, 13, .16);
  overflow: hidden;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 1.4rem;
  border: 2px dotted rgba(59, 36, 23, .22);
  pointer-events: none;
}

.title-scene { grid-template-columns: minmax(0, 1fr); align-items: end; }

.hero-copy { justify-self: start; max-width: 82vw; z-index: 2; }

.folio-label,
.typed-label {
  font-family: var(--mono);
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: clamp(.66rem, 1vw, .86rem);
}

h1,
.scene-word {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
  color: var(--ink);
  text-shadow: 0 .06em 0 rgba(164, 74, 47, .12), 0 0 25px rgba(255, 184, 77, .2);
}

h1 { font-size: clamp(5.6rem, 19vw, 18rem); }

.typed-line {
  margin: 1.2rem 0 0 .5vw;
  font-family: var(--mono);
  font-size: clamp(1rem, 2.2vw, 1.65rem);
  color: var(--ink);
}

.cursor {
  display: inline-block;
  width: .62em;
  height: 1.08em;
  margin-left: .16em;
  transform: translateY(.18em);
  background: var(--amber);
  box-shadow: 0 0 16px var(--amber), 0 0 42px rgba(99, 255, 154, .55);
  animation: blink 1s steps(2) infinite, cursorGlow 4s ease-in-out infinite;
}

.cursor.small { width: .5em; height: 1em; }

@keyframes blink { 50% { opacity: .12; } }
@keyframes cursorGlow { 50% { box-shadow: 0 0 18px var(--amber), 0 0 70px rgba(99, 255, 154, .8); } }

.library-stamp {
  position: absolute;
  right: 9vw;
  top: 13vh;
  z-index: 3;
  padding: .8rem 1rem;
  border: 3px double var(--rust);
  color: var(--rust);
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  transform: rotate(7deg);
  cursor: pointer;
  opacity: .76;
}

.library-stamp.clicked { color: var(--green); border-color: var(--green); text-shadow: 0 0 14px var(--green); }

.binder-holes { position: absolute; left: 5.4vw; top: 18vh; display: grid; gap: 12vh; z-index: 2; }
.binder-holes span { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 4px rgba(245,232,207,.4), 0 4px 13px rgba(27,18,13,.28); opacity: .42; }

.coffee-ring { position: absolute; right: 16vw; bottom: 10vh; width: 16rem; height: 16rem; border: 1.2rem solid rgba(164, 74, 47, .14); border-radius: 50%; filter: blur(.3px); transform: rotate(-18deg); }

.margin-note,
.lab-note,
.index-card,
.epilogue-terminal {
  font-family: var(--mono);
  line-height: 1.55;
  font-size: .82rem;
}

.note-one { position: absolute; right: 8vw; bottom: 18vh; width: 18rem; z-index: 3; color: var(--rust); transform: rotate(-4deg); }
.note-icon { display: block; color: var(--rust); font-size: 1.25rem; margin-bottom: .45rem; }

.terminal-leak,
.terminal-slip,
.epilogue-terminal {
  background: linear-gradient(135deg, rgba(27,18,13,.72), rgba(59,36,23,.45));
  color: var(--green);
  border: 1px solid rgba(99, 255, 154, .32);
  box-shadow: 0 0 40px rgba(99, 255, 154, .22), inset 0 0 32px rgba(99, 255, 154, .08);
}

.terminal-leak { position: absolute; left: 18vw; bottom: 10vh; width: min(38rem, 58vw); padding: 1.1rem 1.3rem; clip-path: polygon(2% 8%, 96% 0, 100% 78%, 84% 100%, 0 92%); opacity: .56; animation: breathe 6s ease-in-out infinite; }
.terminal-glyphs { display: grid; gap: .35rem; font-family: var(--mono); font-size: .74rem; }
@keyframes breathe { 50% { opacity: .86; filter: saturate(1.25); } }

.scene-word {
  position: absolute;
  z-index: 1;
  font-size: clamp(6rem, 21vw, 20rem);
  opacity: .13;
}

.notebook-page,
.reference-card,
.library-card,
.index-card {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, rgba(245,232,207,.96), rgba(217,189,140,.8));
  border: 1px solid rgba(59,36,23,.28);
  box-shadow: 0 24px 65px rgba(27,18,13,.18);
}

.notebook-page { width: min(42rem, 84vw); padding: clamp(2rem, 5vw, 4rem); justify-self: start; transform: rotate(-1.5deg); }
.notebook-page h2,
.reference-card h2,
.library-card h2 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 5.4rem); line-height: .92; margin: .2rem 0 1.2rem; letter-spacing: -.045em; }
.notebook-page p,
.library-card p { font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.75; }

.pencil-mark {
  border: 0;
  background: transparent;
  color: var(--rust);
  font-family: var(--mono);
  padding: .45rem 0;
  cursor: pointer;
  position: relative;
}
.pencil-mark::after { content: ""; position: absolute; left: 0; bottom: .2rem; height: 3px; width: 100%; background: var(--rust); transform-origin: left; transform: scaleX(.25); transition: transform .4s ease; }
.pencil-mark:hover::after { transform: scaleX(1); }

.index-card { position: absolute; right: 9vw; bottom: 13vh; width: min(22rem, 34vw); padding: 1.3rem; transform: rotate(3deg); }
.paperclip { float: right; color: var(--rust); }
.hover-card { transition: transform .35s ease, box-shadow .35s ease; }
.hover-card:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 0 25px rgba(255,184,77,.22), 0 26px 70px rgba(27,18,13,.2); }

.annotation-thread { position: absolute; z-index: 2; height: 2px; background: linear-gradient(90deg, transparent, var(--rust), transparent); opacity: .55; transform-origin: left; }
.thread-a { width: 38vw; left: 41vw; top: 49vh; transform: rotate(13deg); }

.lab-scene { background: linear-gradient(135deg, rgba(245,232,207,.92), rgba(217,189,140,.72) 55%, rgba(27,18,13,.18)); }
.terminal-slip { z-index: 3; width: min(58rem, 78vw); padding: clamp(1.6rem, 4vw, 3rem); transform: rotate(.7deg); clip-path: polygon(0 4%, 96% 0, 100% 93%, 4% 100%); }
.code-memory { display: grid; gap: .8rem; font-family: var(--mono); font-size: clamp(.92rem, 1.8vw, 1.35rem); }
.lab-note { position: absolute; right: 8vw; top: 15vh; width: 19rem; color: var(--ink); background: rgba(245,232,207,.7); padding: 1.2rem; border-left: 4px solid var(--amber); z-index: 4; transform: rotate(2deg); }

.punched-tape { position: absolute; left: 9vw; bottom: 12vh; width: 78vw; height: 3rem; background: radial-gradient(circle, transparent 0 .36rem, rgba(164,74,47,.35) .38rem .46rem, transparent .48rem) 0 50% / 2.4rem 2.4rem, linear-gradient(90deg, rgba(217,189,140,.75), rgba(245,232,207,.55)); border: 1px solid rgba(59,36,23,.2); transform: rotate(-4deg); }

.cassette-strip { position: absolute; top: 17vh; left: 13vw; width: 62vw; height: 2rem; background: repeating-linear-gradient(90deg, var(--rust) 0 10px, transparent 10px 20px), var(--parchment); opacity: .5; transform: rotate(2deg); }
.reference-card { width: min(42rem, 82vw); padding: 2.4rem; transform: rotate(1.4deg); }
.archive-list { list-style: none; padding: 0; margin: 1rem 0 0; font-family: var(--mono); }
.archive-list li { padding: .8rem 0; border-bottom: 1px dotted rgba(59,36,23,.4); }
.archive-list span { color: var(--rust); margin-right: 1rem; }
.floppy-stamp { position: absolute; right: 16vw; bottom: 18vh; z-index: 4; width: 7rem; height: 7rem; display: grid; place-items: center; background: var(--ink); color: var(--green); font-family: var(--mono); text-align: center; text-transform: uppercase; box-shadow: 0 0 22px rgba(99,255,154,.28); transform: rotate(-8deg); }

.library-card { width: min(48rem, 84vw); padding: clamp(2rem, 5vw, 4rem); transform: rotate(-.7deg); }
.contact-link { display: inline-block; margin-top: 1rem; color: var(--rust); font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.45rem); text-decoration-thickness: 3px; text-decoration-color: var(--amber); }
.epilogue-terminal { position: absolute; right: 8vw; bottom: 10vh; width: min(32rem, 70vw); padding: 1rem; font-family: var(--mono); }

.scene.shift .notebook-page,
.scene.shift .terminal-slip,
.scene.shift .reference-card,
.scene.shift .library-card { transform: translateY(-6px) rotate(0deg); transition: transform .8s ease; }

@media (max-width: 780px) {
  .bookmark-nav { top: 0; left: .5rem; display: flex; }
  .bookmark { width: auto; transform: translateY(-.2rem); border-left: 1px solid rgba(59,36,23,.35); padding: .7rem .55rem; }
  .scene { padding: 18vh 7vw 10vh; }
  .note-one, .index-card, .lab-note, .epilogue-terminal { position: relative; right: auto; bottom: auto; top: auto; width: 100%; margin-top: 1.5rem; }
  .terminal-leak { width: 86vw; left: 7vw; }
  .binder-holes { display: none; }
}