:root {
  /* Design lexicon: Mono** Inter** Interprets “namu” through abstract anatomy lower-right invisible Display** */
  --bark-ink: #1D241F;
  --young-leaf: #9BCF83;
  --rice-paper: #F7F3EA;
  --pale-sap: #DDE8C7;
  --shadow-moss: #4E5A45;
  --charcoal-root: #0E120F;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --elastic: cubic-bezier(.18, 1.35, .34, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--bark-ink);
  background: var(--rice-paper);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 19% 22%, rgba(221, 232, 199, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 68%, rgba(78, 90, 69, .12) 0 1px, transparent 1.8px),
    linear-gradient(108deg, transparent 0 44%, rgba(29, 36, 31, .025) 45%, transparent 46% 100%);
  background-size: 29px 31px, 43px 47px, 100% 100%;
  opacity: .58;
}

.z-field {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.growth-path,
.elastic-branch {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.growth-path {
  stroke: rgba(29, 36, 31, .18);
  stroke-width: .55;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-dash, 1000);
  transition: stroke-dashoffset 700ms var(--elastic);
}

.elastic-branch {
  stroke: rgba(155, 207, 131, .72);
  stroke-width: .8;
  stroke-dasharray: 10 16;
  opacity: .32;
  filter: drop-shadow(0 16px 22px rgba(78, 90, 69, .09));
  transition: d 520ms var(--elastic), opacity 520ms ease;
}

.travel-seed {
  position: absolute;
  width: 18px;
  height: 28px;
  border-radius: 54% 46% 52% 48% / 62% 48% 52% 38%;
  background: var(--young-leaf);
  box-shadow: 0 20px 35px rgba(78, 90, 69, .18), inset -5px -7px 0 rgba(78, 90, 69, .09);
  transform: translate3d(8vw, 14vh, 0) rotate(-18deg);
  transition: transform 760ms var(--elastic);
}

.chapter-nav {
  position: fixed;
  inset: 24px 28px auto 28px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  pointer-events: none;
}

.chapter-link {
  position: relative;
  color: rgba(78, 90, 69, .64);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  transition: color 340ms ease, transform 340ms var(--elastic);
}

.chapter-link span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border: 1px solid rgba(78, 90, 69, .34);
  border-radius: 50%;
  transition: background 340ms ease, border-color 340ms ease, transform 340ms var(--elastic);
}

.chapter-link.active {
  color: var(--bark-ink);
  transform: translateY(4px);
}

.chapter-link.active span {
  background: var(--young-leaf);
  border-color: var(--young-leaf);
  transform: scale(1.45);
}

main { position: relative; z-index: 1; }

.panel {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(10vh, 1fr));
  column-gap: clamp(12px, 2vw, 34px);
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(78, 90, 69, .07);
  mask-image: linear-gradient(108deg, #000 0 18%, transparent 18% 32%, #000 32% 100%);
  z-index: -1;
}

.mono-note {
  margin: 0;
  color: rgba(78, 90, 69, .72);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  line-height: 1.8;
  text-transform: uppercase;
}

.note-top {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: end;
}

.note-top.right {
  grid-column: 8 / 13;
  text-align: right;
}

.vertical {
  position: absolute;
  left: clamp(25px, 4vw, 58px);
  bottom: 16vh;
  writing-mode: vertical-rl;
}

.wordmark {
  grid-column: 7 / 13;
  grid-row: 6 / 8;
  align-self: end;
  margin: 0;
  color: var(--bark-ink);
  font-family: var(--serif);
  font-size: clamp(64px, 11vw, 176px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.055em;
}

.statement {
  margin: 0;
  color: var(--bark-ink);
  font-family: var(--serif);
  font-size: clamp(58px, 10vw, 160px);
  font-weight: 400;
  letter-spacing: -.048em;
  line-height: .86;
}

.statement em {
  color: var(--shadow-moss);
  font-style: italic;
  font-weight: 400;
}

.panel-grain .statement {
  grid-column: 3 / 10;
  grid-row: 3 / 5;
}

.branch-title {
  grid-column: 2 / 9;
  grid-row: 2 / 4;
}

.final {
  grid-column: 5 / 12;
  grid-row: 3 / 6;
  text-align: right;
}

.detail {
  margin: 0;
  color: var(--shadow-moss);
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.65;
  letter-spacing: -.01em;
}

.detail-left {
  grid-column: 1 / 5;
  grid-row: 6 / 8;
  align-self: center;
}

.lower-left {
  grid-column: 1 / 5;
  grid-row: 7 / 8;
}

.right-detail {
  grid-column: 8 / 12;
  grid-row: 6 / 8;
}

.closing {
  grid-column: 2 / 6;
  grid-row: 6 / 8;
}

.coordinate {
  grid-column: 8 / 13;
  grid-row: 8;
  text-align: right;
}

.floating-cluster {
  position: absolute;
  width: 24vw;
  height: 24vw;
  min-width: 220px;
  min-height: 220px;
  pointer-events: none;
  animation: floatSlow 11s ease-in-out infinite alternate;
}

.cluster-seed { top: 10vh; right: 8vw; }
.cluster-rings { top: 7vh; right: -4vw; animation-duration: 15s; }
.cluster-leaf { right: 9vw; top: 18vh; animation-duration: 13s; }

.shape, .ring {
  position: absolute;
  display: block;
}

.seed-oval {
  left: 14%; top: 18%;
  width: 42px; height: 72px;
  border-radius: 55% 45% 53% 47%;
  background: rgba(221, 232, 199, .82);
  box-shadow: inset -12px -11px 0 rgba(155, 207, 131, .28), 0 28px 45px rgba(78, 90, 69, .1);
  transform: rotate(27deg);
}

.paper-chip {
  right: 15%; top: 28%;
  width: 88px; height: 118px;
  background: rgba(247, 243, 234, .72);
  border: 1px solid rgba(78, 90, 69, .13);
  border-radius: 6px;
  box-shadow: 0 34px 60px rgba(78, 90, 69, .12);
  transform: rotate(-9deg);
}

.leaf-dot {
  left: 52%; bottom: 18%;
  width: 18px; height: 18px;
  border-radius: 50% 50% 50% 8%;
  background: var(--young-leaf);
  transform: rotate(45deg);
}

.ring {
  border: 1px solid rgba(29, 36, 31, .28);
  border-radius: 47% 53% 46% 54%;
  transform: rotate(var(--r, 0deg));
}

.ring-one { width: 210px; height: 160px; left: 5%; top: 9%; --r: -13deg; }
.ring-two { width: 126px; height: 94px; left: 22%; top: 24%; --r: 11deg; border-color: rgba(155, 207, 131, .54); }

.root-comma {
  right: 18%; bottom: 22%;
  width: 58px; height: 112px;
  border-radius: 72% 28% 70% 30%;
  border-left: 2px solid rgba(29, 36, 31, .38);
  transform: rotate(34deg);
}

.leaf-slice {
  left: 16%; top: 10%;
  width: 180px; height: 94px;
  border-radius: 100% 0 100% 0;
  background: rgba(221, 232, 199, .66);
  border: 1px solid rgba(155, 207, 131, .5);
  transform: rotate(-25deg);
}

.chip-small { width: 68px; height: 88px; right: 18%; bottom: 18%; transform: rotate(16deg); }

.seal {
  grid-column: 11 / 13;
  grid-row: 8;
  justify-self: end;
  align-self: end;
  width: 46px;
  height: 46px;
  position: relative;
}

.seal b {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 34px;
  background: var(--bark-ink);
  border-radius: 999px;
}

.seal b:first-child { left: 11px; }
.seal b:nth-child(2) { right: 13px; height: 26px; }
.seal em {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 8%;
  background: var(--young-leaf);
  transform: rotate(45deg);
}

.branch-workbench {
  grid-column: 2 / 7;
  grid-row: 6 / 8;
  position: relative;
  min-height: 130px;
}

.branch-workbench span {
  position: absolute;
  display: block;
  height: 1px;
  background: rgba(29, 36, 31, .36);
  transform-origin: left center;
  transition: transform 520ms var(--elastic), background 400ms ease;
}

.branch-workbench span:nth-child(1) { width: 52%; left: 4%; top: 62%; transform: rotate(-8deg); }
.branch-workbench span:nth-child(2) { width: 32%; left: 31%; top: 48%; transform: rotate(23deg); background: rgba(155, 207, 131, .8); }
.branch-workbench span:nth-child(3) { width: 24%; left: 58%; top: 42%; transform: rotate(-26deg); }
.branch-workbench span:nth-child(4) { width: 16%; left: 73%; top: 27%; transform: rotate(18deg); background: rgba(155, 207, 131, .75); }

.work-marks {
  grid-column: 7 / 13;
  grid-row: 6 / 8;
  position: relative;
}

.work-marks i {
  position: absolute;
  display: block;
  border: 1px solid rgba(78, 90, 69, .22);
  background: rgba(221, 232, 199, .25);
  box-shadow: 0 22px 45px rgba(78, 90, 69, .08);
}

.work-marks i:nth-child(1) { width: 190px; height: 74px; right: 18%; top: 10%; transform: rotate(-4deg); }
.work-marks i:nth-child(2) { width: 78px; height: 78px; right: 5%; top: 30%; border-radius: 50%; }
.work-marks i:nth-child(3) { width: 1px; height: 160px; right: 43%; top: 0; background: var(--young-leaf); border: 0; }
.work-marks i:nth-child(4) { width: 122px; height: 1px; right: 35%; top: 72%; background: rgba(29, 36, 31, .4); border: 0; }
.work-marks i:nth-child(5) { width: 22px; height: 22px; right: 55%; top: 50%; border-radius: 50% 50% 50% 7%; background: var(--young-leaf); transform: rotate(45deg); }

.panel-seed { background: var(--rice-paper); }
.panel-grain { background: linear-gradient(180deg, var(--rice-paper), rgba(221, 232, 199, .18)); }
.panel-branch { background: linear-gradient(180deg, rgba(221, 232, 199, .18), var(--rice-paper)); }
.panel-work { background: radial-gradient(circle at 78% 34%, rgba(221, 232, 199, .46), transparent 28%), var(--rice-paper); }

@keyframes floatSlow {
  from { transform: translate3d(0, 0, 0) rotate(-1deg); }
  to { transform: translate3d(14px, -22px, 0) rotate(4deg); }
}

body.pointer-near .elastic-branch { opacity: .62; }
body.pointer-near .branch-workbench span:nth-child(1) { transform: rotate(-3deg) scaleX(1.05); }
body.pointer-near .branch-workbench span:nth-child(2) { transform: rotate(31deg) scaleX(1.12); }
body.pointer-near .branch-workbench span:nth-child(3) { transform: rotate(-18deg) scaleX(.95); }
body.pointer-near .branch-workbench span:nth-child(4) { transform: rotate(25deg) scaleX(1.18); }

@media (max-width: 760px) {
  .chapter-nav { grid-template-columns: repeat(2, max-content); row-gap: 10px; }
  .panel { padding: 72px 22px 34px; grid-template-columns: repeat(6, 1fr); }
  .note-top, .note-top.right, .detail-left, .lower-left, .right-detail, .closing, .coordinate { grid-column: 1 / 7; text-align: left; }
  .wordmark, .panel-grain .statement, .branch-title, .final { grid-column: 1 / 7; text-align: left; }
  .wordmark { grid-row: 5 / 7; }
  .statement { font-size: clamp(54px, 18vw, 96px); }
  .floating-cluster { opacity: .72; right: -18vw; }
  .work-marks, .branch-workbench { grid-column: 1 / 7; }
}