:root {
  --charcoal-seed: #2F2A24;
  --sage-dust: #7B8A62;
  --oxide-red: #8F3524;
  --burnt-clay: #B9582A;
  --sunbaked-paper: #F3D9B1;
  --soft-ash: #D7B98E;
  --display: "Nunito", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --hand: "Gaegu", cursive;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--sunbaked-paper);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--charcoal-seed);
  font-family: var(--body);
  background:
    radial-gradient(circle at 16% 12%, rgba(185, 88, 42, .18), transparent 28rem),
    radial-gradient(circle at 86% 38%, rgba(123, 138, 98, .18), transparent 26rem),
    linear-gradient(102deg, rgba(215, 185, 142, .34), transparent 42%, rgba(143, 53, 36, .08)),
    var(--sunbaked-paper);
}

body::before,
body::after,
.paper-grain {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

body::before {
  box-shadow: inset 0 0 90px rgba(47, 42, 36, .28), inset 0 0 18px rgba(143, 53, 36, .12);
  mix-blend-mode: multiply;
}

body::after {
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(47, 42, 36, .16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 70%, rgba(143, 53, 36, .18) 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(47,42,36,.04) 1px, transparent 1px);
  background-size: 31px 37px, 47px 53px, 13px 100%;
}

.paper-grain {
  opacity: .36;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(47, 42, 36, .045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(6deg, rgba(255,255,255,.08) 0 2px, rgba(47,42,36,.025) 2px 3px, transparent 3px 9px);
  filter: blur(.25px);
}

.timeline {
  position: fixed;
  left: 50%;
  top: 0;
  width: min(58vw, 560px);
  height: 520vh;
  transform: translateX(-50%);
  z-index: 1;
  overflow: visible;
}

.timeline-path,
.timeline-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#roughen);
}

.timeline-path {
  stroke: var(--burnt-clay);
  stroke-width: 7;
  stroke-dasharray: 3820;
  stroke-dashoffset: 3820;
  transition: stroke-dashoffset .25s linear;
}

.timeline-shadow {
  stroke: rgba(47, 42, 36, .16);
  stroke-width: 18;
  transform: translate(5px, 6px);
  filter: url(#softPencil);
}

.daybook {
  position: relative;
  z-index: 2;
}

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(18rem, 31rem) minmax(8rem, 16rem) minmax(18rem, 31rem) minmax(2rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3.4rem);
  padding: clamp(4rem, 7vw, 7rem) 0;
  isolation: isolate;
}

.chapter::before {
  content: attr(data-label);
  position: absolute;
  right: 5vw;
  top: 9vh;
  color: rgba(143, 53, 36, .12);
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 12rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.08em;
  z-index: -1;
}

.chapter:nth-child(even)::before {
  left: 4vw;
  right: auto;
  color: rgba(123, 138, 98, .14);
}

.chapter-copy,
.viz,
.node {
  transition: filter .8s ease, opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.chapter:not(.active) .chapter-copy,
.chapter:not(.active) .viz,
.chapter:not(.active) .node {
  filter: blur(3px);
  opacity: .48;
}

.chapter.active .chapter-copy,
.chapter.active .viz,
.chapter.active .node {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, 0deg));
}

.left-note { grid-column: 2; --tilt: -1.2deg; }
.right-note { grid-column: 4; --tilt: 1.3deg; }

.chapter-copy {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 2.4rem);
  border: 2px solid rgba(47, 42, 36, .55);
  border-radius: 26px 18px 32px 20px;
  background: rgba(243, 217, 177, .70);
  box-shadow: 13px 16px 0 rgba(215, 185, 142, .42), 0 22px 60px rgba(47, 42, 36, .12);
  transform: translateY(2.5rem) rotate(var(--tilt, 0deg));
}

.chapter-copy::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px dashed rgba(143, 53, 36, .34);
  border-radius: inherit;
  pointer-events: none;
}

.torn {
  clip-path: polygon(0 3%, 7% 0, 16% 3%, 24% 1%, 34% 4%, 43% 0, 55% 3%, 66% 1%, 78% 4%, 89% 1%, 100% 3%, 99% 95%, 90% 100%, 78% 96%, 67% 99%, 55% 96%, 45% 100%, 35% 97%, 22% 99%, 12% 96%, 0 99%);
}

.rounded-note {
  border-radius: 46px 32px 52px 28px;
}

.final-note {
  box-shadow: 13px 16px 0 rgba(185, 88, 42, .20), 0 22px 60px rgba(47, 42, 36, .12);
}

.kicker,
.marginal,
.viz-label,
.arrow-note {
  font-family: var(--hand);
}

.kicker {
  margin: 0 0 .4rem;
  color: var(--oxide-red);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.07em;
  color: var(--charcoal-seed);
}

.chapter-copy p:not(.kicker):not(.marginal) {
  max-width: 29rem;
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  line-height: 1.65;
}

.marginal {
  display: inline-block;
  margin: 1.2rem .6rem 0 0;
  color: var(--sage-dust);
  font-size: 1.35rem;
  transform: rotate(-3deg);
}

.crossed {
  color: var(--oxide-red);
  text-decoration: line-through .18rem var(--oxide-red);
}

.node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.8rem;
  height: 6.8rem;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(.82);
  border: 3px solid var(--oxide-red);
  border-radius: 42% 58% 46% 54%;
  background: var(--sunbaked-paper);
  box-shadow: 0 0 0 .65rem rgba(185, 88, 42, .13), 0 13px 32px rgba(47, 42, 36, .18);
  font-family: var(--display);
  font-weight: 900;
  color: var(--oxide-red);
  z-index: 5;
}

.node::before,
.node::after {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid rgba(47, 42, 36, .22);
  border-radius: 50%;
  transform: rotate(24deg);
}

.node::after {
  inset: -.9rem;
  border-style: dashed;
  border-color: rgba(123, 138, 98, .48);
}

.node span { position: relative; z-index: 1; }

.viz {
  grid-column: 4;
  justify-self: center;
  width: min(27rem, 86vw);
  min-height: 12rem;
  padding: 1.1rem;
  border-radius: 28px 18px 24px 34px;
  background: rgba(215, 185, 142, .38);
  border: 1.5px solid rgba(47, 42, 36, .35);
  box-shadow: 0 15px 45px rgba(47, 42, 36, .10);
  transform: translateY(2rem) rotate(1deg);
}

.chapter:nth-child(even) .viz { grid-column: 2; transform: translateY(2rem) rotate(-1.5deg); }
.chapter:nth-child(3) .viz { grid-column: 4; }
.chapter:nth-child(5) .viz { grid-column: 4; }

.viz svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.grid-line {
  fill: none;
  stroke: rgba(47, 42, 36, .18);
  stroke-width: 1.2;
  stroke-dasharray: 5 9;
}

.draw-line,
.ring,
.ticks path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--dash, 620);
  stroke-dashoffset: var(--dash, 620);
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.8,.22,1);
  filter: url(#roughen);
}

.chapter.active .draw-line,
.chapter.active .ring,
.chapter.active .ticks path { stroke-dashoffset: 0; }

.clay { stroke: var(--burnt-clay); stroke-width: 6; }
.sage { stroke: var(--sage-dust); stroke-width: 4; }
.oxide { stroke: var(--oxide-red); stroke-width: 5; }
.ash { stroke: var(--soft-ash); stroke-width: 6; }
.ring { stroke-width: 4; --dash: 590; }
.spiral { --dash: 760; }
.ticks path { stroke: var(--charcoal-seed); stroke-width: 5; --dash: 26; }

.viz-label {
  display: block;
  color: var(--oxide-red);
  font-size: 1.3rem;
  line-height: 1;
  margin-top: .35rem;
  transform: rotate(-2deg);
}

.scatter,
.sun-path,
.tally,
.arrow-note {
  position: absolute;
  z-index: 0;
}

.seeds {
  left: 10vw;
  bottom: 12vh;
  width: 14rem;
  height: 10rem;
  opacity: .8;
}

.seeds i,
.dot-field i {
  position: absolute;
  width: .62rem;
  height: .9rem;
  border-radius: 56% 44% 49% 51%;
  background: var(--charcoal-seed);
  opacity: .55;
  animation: drift 4.5s ease-in-out infinite alternate;
}

.seeds i:nth-child(1) { left: 8%; top: 24%; }
.seeds i:nth-child(2) { left: 22%; top: 60%; animation-delay: -.7s; }
.seeds i:nth-child(3) { left: 41%; top: 38%; animation-delay: -1.1s; }
.seeds i:nth-child(4) { left: 64%; top: 68%; animation-delay: -.4s; }
.seeds i:nth-child(5) { left: 78%; top: 28%; animation-delay: -1.9s; }
.seeds i:nth-child(6) { left: 54%; top: 12%; animation-delay: -.9s; }
.seeds i:nth-child(7) { left: 12%; top: 80%; animation-delay: -1.5s; }
.seeds i:nth-child(8) { left: 86%; top: 76%; animation-delay: -.2s; }

.tally-one {
  right: 10vw;
  bottom: 14vh;
  display: flex;
  gap: .65rem;
  transform: rotate(8deg);
}

.tally b {
  width: .35rem;
  height: 5.8rem;
  border-radius: 99px;
  background: var(--oxide-red);
  opacity: .72;
}

.tally b:nth-child(5) {
  width: 6.2rem;
  height: .35rem;
  align-self: center;
  transform: translateX(-5.8rem) rotate(-22deg);
}

.dot-field {
  position: relative;
  height: 16rem;
}

.dot-field i {
  background: var(--burnt-clay);
  opacity: .62;
}

.dot-field i:nth-child(1) { left: 12%; top: 22%; }
.dot-field i:nth-child(2) { left: 22%; top: 46%; }
.dot-field i:nth-child(3) { left: 30%; top: 32%; }
.dot-field i:nth-child(4) { left: 36%; top: 62%; }
.dot-field i:nth-child(5) { left: 45%; top: 20%; }
.dot-field i:nth-child(6) { left: 51%; top: 49%; }
.dot-field i:nth-child(7) { left: 56%; top: 70%; }
.dot-field i:nth-child(8) { left: 63%; top: 32%; }
.dot-field i:nth-child(9) { left: 68%; top: 54%; }
.dot-field i:nth-child(10) { left: 76%; top: 24%; }
.dot-field i:nth-child(11) { left: 82%; top: 64%; }
.dot-field i:nth-child(12) { left: 18%; top: 72%; background: var(--sage-dust); }
.dot-field i:nth-child(13) { left: 42%; top: 84%; background: var(--sage-dust); }
.dot-field i:nth-child(14) { left: 72%; top: 81%; background: var(--sage-dust); }
.dot-field i:nth-child(15) { left: 87%; top: 39%; background: var(--sage-dust); }
.dot-field i:nth-child(16) { left: 10%; top: 50%; background: var(--oxide-red); }
.dot-field i:nth-child(17) { left: 58%; top: 12%; background: var(--oxide-red); }
.dot-field i:nth-child(18) { left: 92%; top: 73%; background: var(--oxide-red); }

.sun-path {
  left: 7vw;
  top: 13vh;
  width: 18rem;
  height: 9rem;
  border-top: 3px dashed rgba(185, 88, 42, .5);
  border-radius: 50% 50% 0 0;
  transform: rotate(-10deg);
}

.sun-path span {
  position: absolute;
  right: 18%;
  top: -1.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--burnt-clay);
  box-shadow: 0 0 0 .8rem rgba(185, 88, 42, .16);
}

.ruler-line {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 14rem;
  border-bottom: 4px solid var(--charcoal-seed);
  border-left: 2px dashed rgba(47, 42, 36, .36);
}

.ruler-line span {
  width: .55rem;
  height: var(--h);
  border-radius: 99px;
  background: var(--oxide-red);
  transform-origin: bottom;
  transform: scaleY(.05);
  transition: transform 1.2s ease;
}

.chapter.active .ruler-line span { transform: scaleY(1) rotate(var(--r, -2deg)); }
.ruler-line span:nth-child(2n) { --r: 3deg; background: var(--sage-dust); }

.arrow-note {
  left: 11vw;
  bottom: 18vh;
  color: var(--oxide-red);
  font-size: 1.75rem;
  transform: rotate(-9deg);
}

.arrow-note::after {
  content: "";
  display: block;
  width: 9rem;
  height: 3rem;
  margin-left: 5rem;
  border-bottom: 3px solid var(--oxide-red);
  border-right: 3px solid var(--oxide-red);
  border-radius: 0 0 80% 0;
  transform: skewX(-20deg) rotate(8deg);
}

.phase-marker {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .65rem .95rem;
  border: 1px solid rgba(47, 42, 36, .4);
  border-radius: 999px;
  background: rgba(243, 217, 177, .76);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(47, 42, 36, .12);
}

.phase-marker span {
  font-family: var(--display);
  font-weight: 900;
  color: var(--oxide-red);
}

.phase-marker em {
  font-family: var(--hand);
  font-size: 1.25rem;
  font-style: normal;
  color: var(--sage-dust);
}

@keyframes drift {
  from { transform: translate3d(-2px, 1px, 0) rotate(-8deg); }
  to { transform: translate3d(3px, -3px, 0) rotate(9deg); }
}

@media (max-width: 860px) {
  .timeline {
    left: 20%;
    width: 70vw;
  }

  .chapter {
    grid-template-columns: 1.1rem minmax(0, 1fr) 1.1rem;
    gap: 1.4rem;
    padding: 6rem 0 5rem;
    align-content: center;
  }

  .left-note,
  .right-note,
  .viz,
  .chapter:nth-child(even) .viz,
  .chapter:nth-child(3) .viz,
  .chapter:nth-child(5) .viz {
    grid-column: 2;
  }

  .chapter-copy {
    margin-left: 3rem;
  }

  .node {
    left: 20%;
    width: 5.5rem;
    height: 5.5rem;
    font-size: .92rem;
  }

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

  .chapter::before {
    top: 5vh;
    right: 2vw;
    font-size: 22vw;
  }

  .seeds,
  .tally-one,
  .sun-path,
  .arrow-note { opacity: .42; }
}