/* chika.racing — underground telemetry notebook
   palette:
   #f4f8fb paper cream-blue   | #dfeaf3 faint pencil-grid
   #9bb8d1 mid-sky annotation | #5a82a8 cobalt ink
   #2c4d72 deep tunnel-blue   | #a8d5e8 glow cyan
   #e6f4f1 fungus-mint        | #1a2940 subterranean ink
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper: #f4f8fb;
  --grid: #dfeaf3;
  --annot: #9bb8d1;
  --ink: #5a82a8;
  --deep: #2c4d72;
  --glow: #a8d5e8;
  --mint: #e6f4f1;
  --subterranean: #1a2940;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--grid) 0.5px, transparent 0.5px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: "Caveat", cursive;
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

/* ----- floating pencil cursor ----- */
#pencilCursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 200ms ease;
  opacity: 0;
  will-change: transform;
}
body.in-content #pencilCursor { opacity: 1; }
body.in-content #notebook { cursor: none; }

/* ----- pagination glyph in the void ----- */
#pageGlyph {
  position: fixed;
  bottom: 28px; right: 36px;
  font-family: "Kalam", cursive;
  font-size: 1.1rem;
  color: var(--annot);
  z-index: 50;
  transform: rotate(-3deg);
  user-select: none;
  letter-spacing: 0.02em;
}
#pageGlyph span { color: var(--grid); }

/* ----- notebook frame: ma negative space ----- */
#notebook {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14vh 0 16vh;
  position: relative;
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 6vh 0;
}

/* the centerline column ~460px, surrounded by the void */
.col {
  width: min(460px, 86vw);
  margin: 0 auto;
}

.body p {
  margin-bottom: 1.05em;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  hyphens: auto;
}
.body em {
  font-style: normal;
  font-weight: 600;
  color: var(--deep);
}

/* ----- chapter title ----- */
.chapter-title {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  color: var(--deep);
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.title-squiggle {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 0.1rem;
  overflow: visible;
}
.title-squiggle path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.chapter.live .title-squiggle path {
  animation: drawIn 1.4s ease forwards;
  animation-delay: 0.4s;
}

/* ----- chapter tab (organic blob with number) ----- */
.tab {
  position: relative;
  width: min(260px, 80vw);
  margin: 0 auto 3.4rem;
  padding: 1.6rem 1.2rem 1.2rem;
  text-align: center;
}
.tab-blob {
  position: absolute;
  inset: -10px -18px;
  width: calc(100% + 36px);
  height: calc(100% + 20px);
  z-index: -1;
  filter: url(#blobShimmer);
}
.tab-num {
  display: block;
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--subterranean);
  letter-spacing: 0.04em;
}
.tab-title {
  display: block;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--deep);
  margin-top: 0.1rem;
}

/* ----- left-margin annotations docked in the void ----- */
.ann {
  position: absolute;
  width: 188px;
  left: calc(50% - 230px - 188px - 36px);
  font-family: "Kalam", cursive;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--annot);
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  transition: opacity 700ms ease, transform 700ms ease;
}
.ann.live { opacity: 1; transform: translate3d(0, 0, 0); }
.ann-a { top: 12rem; }
.ann-b { top: 30rem; }
.ann-c { top: 40rem; }
.ann-a.live { transition-delay: 400ms; }
.ann-b.live { transition-delay: 520ms; }
.ann-c.live { transition-delay: 640ms; }
.ann-text {
  display: block;
  padding: 0.5rem 0.6rem;
  border-left: 1.5px solid var(--annot);
}

/* hand-drawn diagrams */
.diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.diagram .draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.chapter.live .diagram .draw {
  animation: drawIn 1.6s ease forwards;
  animation-delay: 0.4s;
}
.dlabel {
  font-family: "Kalam", cursive;
  font-size: 8px;
  fill: var(--ink);
}

/* ----- right-margin organic-blob callouts ----- */
.blob-callout {
  position: absolute;
  top: 18rem;
  left: calc(50% + 230px + 36px);
  width: 200px;
  padding: 1.3rem 1.3rem 1.4rem;
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--deep);
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: 300ms;
}
.blob-callout.live { opacity: 1; transform: translate3d(0, 0, 0); }
.blob {
  position: absolute;
  inset: -8px -10px;
  width: calc(100% + 20px);
  height: calc(100% + 16px);
  z-index: -1;
  filter: url(#blobShimmer);
}
.blob-callout .blob-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.blob-callout.discovery {
  color: var(--subterranean);
  font-weight: 600;
}

/* ----- ma gulfs between chapters ----- */
.gulf {
  position: relative;
  height: 240px;
}
.gulf-end { height: 120px; }

/* ----- void doodles (escaped notebook scribbles) ----- */
.void-doodle {
  position: absolute;
  width: 70px;
  height: 50px;
  opacity: 0.18;
  pointer-events: auto;
}
.gulf .void-doodle { top: 90px; left: calc(50% + 280px); }
.vd-tunnel { left: calc(50% - 350px) !important; top: 4rem; }
.vd-fungus { left: calc(50% + 300px) !important; }
.vd-stopwatch { left: calc(50% - 360px) !important; }
.vd-starburst { left: calc(50% + 320px) !important; }
.chapter > .void-doodle { top: 2rem; }

/* the gulf doodles override positions consistently */
.gulf .vd-tunnel { top: 80px; left: calc(50% - 330px) !important; }
.gulf .vd-fungus { top: 80px; left: calc(50% + 290px) !important; }
.gulf .vd-stopwatch { top: 80px; left: calc(50% - 340px) !important; }
.gulf .vd-starburst { top: 80px; left: calc(50% + 300px) !important; }

/* ----- shared draw animation ----- */
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

/* ----- body fade-in choreography ----- */
.body, .chapter-title {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 800ms ease, transform 800ms ease;
}
.chapter.live .body,
.chapter.live .chapter-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.tab {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 800ms ease, transform 800ms ease;
}
.chapter.live .tab { opacity: 1; transform: translate3d(0, 0, 0); }

/* ----- responsive: void contracts, marginalia reflow inline ----- */
@media (max-width: 1100px) {
  .ann, .blob-callout {
    position: static;
    width: 100%;
    max-width: 460px;
    margin: 1.4rem auto;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
  }
  .ann { font-style: italic; }
  .blob-callout { padding: 1.4rem 1.6rem; }
  .void-doodle { display: none; }
  .ann-text { border-left: 2px solid var(--annot); }
}

@media (max-width: 560px) {
  body { font-size: 1.06rem; }
  #notebook { padding: 8vh 16px 12vh; }
  .col { width: 100%; }
  .chapter { min-height: auto; padding: 4vh 0; }
  .gulf { height: 120px; }
  #pencilCursor { display: none; }
  body.in-content #notebook { cursor: auto; }
  .chapter-title { font-size: clamp(2rem, 9vw, 2.8rem); }
}