:root {
  /* DESIGN typography tokens: Mono* Mono** small caps sparse ritual indexing */
  --paper: #E7DDC8;
  --ink: #241F1A;
  --tea: #C9B88D;
  --indigo: #576A7C;
  --plum: #4B3035;
  --moss: #7C806B;
  --seal: #A45135;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --serif: "Noto Serif JP", "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 184, 141, .42), transparent 34vw),
    radial-gradient(circle at 88% 74%, rgba(87, 106, 124, .14), transparent 38vw),
    linear-gradient(92deg, rgba(75, 48, 53, .05), transparent 16%, rgba(126, 128, 107, .09) 58%, transparent),
    var(--paper);
  font-family: var(--serif);
  overflow-x: hidden;
}

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

body::before {
  background-image:
    linear-gradient(90deg, rgba(36, 31, 26, .035) 1px, transparent 1px),
    linear-gradient(rgba(36, 31, 26, .028) 1px, transparent 1px);
  background-size: 37px 37px, 53px 53px;
  mix-blend-mode: multiply;
  opacity: .42;
}

body::after {
  background:
    radial-gradient(circle at 10% 20%, rgba(36, 31, 26, .08) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 40%, rgba(164, 81, 53, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 80%, rgba(87, 106, 124, .10) 0 1px, transparent 2px);
  background-size: 140px 170px, 190px 230px, 160px 210px;
  opacity: .38;
}

.paper-grain {
  background: repeating-linear-gradient(100deg, rgba(36,31,26,.018) 0 2px, transparent 2px 7px);
  opacity: .85;
}

.wash {
  position: fixed;
  pointer-events: none;
  filter: blur(18px) saturate(.85);
  mix-blend-mode: multiply;
  opacity: .58;
  z-index: 0;
  animation: washDrift 24s ease-in-out infinite alternate;
}

.wash-indigo {
  width: 46vw;
  height: 36vw;
  right: -8vw;
  top: 10vh;
  background: radial-gradient(ellipse at 44% 40%, rgba(87, 106, 124, .50), rgba(87,106,124,.16) 42%, transparent 72%);
  border-radius: 44% 56% 61% 39% / 48% 39% 61% 52%;
}

.wash-persimmon {
  width: 28vw;
  height: 32vw;
  left: -7vw;
  top: 58vh;
  background: radial-gradient(circle, rgba(164,81,53,.38), rgba(164,81,53,.12) 48%, transparent 72%);
  border-radius: 62% 38% 48% 52% / 44% 56% 41% 59%;
  animation-delay: -8s;
}

.wash-moss {
  width: 38vw;
  height: 26vw;
  left: 42vw;
  bottom: -10vw;
  background: radial-gradient(ellipse, rgba(126,128,107,.36), rgba(126,128,107,.12) 44%, transparent 76%);
  border-radius: 49% 51% 40% 60% / 42% 47% 53% 58%;
  animation-delay: -14s;
}

.thread-nav {
  position: fixed;
  top: 17vh;
  right: 28px;
  width: 1px;
  height: 66vh;
  background: rgba(36, 31, 26, .28);
  z-index: 12;
}

.knot {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  background: var(--paper);
  border: 1px solid rgba(36,31,26,.48);
  text-decoration: none;
  transition: background .7s ease, border-color .7s ease, transform .7s ease;
}

.knot:nth-child(1) { top: 0%; --tilt: 12deg; }
.knot:nth-child(2) { top: 24%; --tilt: -7deg; }
.knot:nth-child(3) { top: 49%; --tilt: 4deg; }
.knot:nth-child(4) { top: 73%; --tilt: -13deg; }
.knot:nth-child(5) { top: 100%; --tilt: 8deg; }
.knot.active { background: var(--seal); border-color: var(--seal); transform: translate(-50%, -50%) rotate(var(--tilt)) scale(1.28); }
.knot span { display: none; }

.scroll-score { position: relative; z-index: 1; }

.movement {
  position: relative;
  min-height: 112vh;
  padding: 12vh 9vw;
  overflow: hidden;
  isolation: isolate;
}

.movement::before {
  content: attr(data-movement);
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  color: rgba(36,31,26,.34);
  left: 3vw;
  top: 50%;
  writing-mode: vertical-rl;
}

.micro-label {
  position: absolute;
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(36,31,26,.60);
  margin: 0;
}

.label-top { top: 8vh; left: 10vw; }
.label-side { top: 18vh; right: 11vw; writing-mode: vertical-rl; }

.title-assembly {
  display: flex;
  align-items: flex-start;
  gap: clamp(1px, .55vw, 10px);
  margin-top: 15vh;
  margin-left: -1vw;
  font-family: var(--display);
  font-size: clamp(5.8rem, 17.5vw, 18.5rem);
  line-height: .78;
  letter-spacing: -.035em;
  color: var(--ink);
}

.title-assembly span {
  opacity: 0;
  transform: translateY(38px) rotate(-4deg);
  animation: placeLetter 1.3s cubic-bezier(.15,.78,.2,1) forwards;
  animation-delay: var(--delay);
  text-shadow: 0 18px 30px rgba(75,48,53,.11);
}

.title-assembly span:nth-child(3n) { margin-top: .13em; letter-spacing: .08em; }
.title-assembly span:nth-child(4n) { transform: translateY(52px) rotate(5deg); }

.poem {
  max-width: 430px;
  font-size: clamp(1.05rem, 1.7vw, 1.7rem);
  line-height: 1.8;
  font-weight: 300;
  color: rgba(36,31,26,.78);
}

.arrival-poem { margin: 8vh 0 0 52vw; }
.gate-poem { margin: 52vh 0 0 12vw; }
.disassembly-poem { margin: 5vh 0 0 48vw; }
.return-poem { margin: 7vh 0 0 9vw; }

.movement-word {
  font-family: var(--display);
  font-weight: 400;
  line-height: .82;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}

.cut-word {
  position: absolute;
  top: 16vh;
  left: 7vw;
  font-size: clamp(8rem, 25vw, 27rem);
  letter-spacing: .06em;
  transform-origin: left top;
  transition: transform .9s cubic-bezier(.76,0,.24,1), letter-spacing .9s ease;
}
.movement-gate.in-view .cut-word { transform: rotate(90deg) translateY(-.88em); letter-spacing: -.02em; }

.stacked {
  position: absolute;
  top: 10vh;
  left: 8vw;
  font-size: clamp(7rem, 18vw, 20rem);
  letter-spacing: .02em;
  color: rgba(36,31,26,.88);
}

.broken {
  display: flex;
  flex-direction: column;
  gap: .02em;
  margin: 8vh 0 0 6vw;
  font-size: clamp(5rem, 15vw, 16rem);
  letter-spacing: .05em;
}
.broken span { transition: transform 1.6s ease, opacity 1.6s ease; }
.movement-disassembly.in-view .broken span:nth-child(1) { transform: translateX(-2vw) rotate(-3deg); }
.movement-disassembly.in-view .broken span:nth-child(2) { transform: translateX(9vw) rotate(2deg); opacity: .74; }
.movement-disassembly.in-view .broken span:nth-child(3) { transform: translateX(27vw) rotate(-2deg); opacity: .58; }
.movement-disassembly.in-view .broken span:nth-child(4) { transform: translateX(14vw) rotate(1deg); opacity: .68; }
.movement-disassembly.in-view .broken span:nth-child(5) { transform: translateX(36vw) rotate(4deg); opacity: .48; }

.return-word {
  margin: 14vh 0 0 8vw;
  font-size: clamp(7rem, 22vw, 24rem);
  letter-spacing: .14em;
  color: rgba(36,31,26,.90);
}

.paper-slip,
.instruction,
.washi {
  position: absolute;
  background: rgba(231,221,200,.74);
  border: 1px solid rgba(36,31,26,.18);
  box-shadow: 0 18px 48px rgba(36,31,26,.12);
  backdrop-filter: blur(1px);
}

.paper-slip {
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36,31,26,.70);
}

.paper-slip::before,
.washi::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(201,184,141,.26);
  transform: rotate(-1deg);
}

.slip-one { right: 17vw; top: 18vh; transform: rotate(3deg); }
.slip-two { right: 21vw; bottom: 24vh; transform: rotate(-5deg); }
.slip-three { right: 15vw; top: 28vh; transform: rotate(4deg); }

.seal-square {
  position: absolute;
  width: 74px;
  height: 74px;
  left: 14vw;
  bottom: 18vh;
  background: rgba(164,81,53,.85);
  box-shadow: 0 0 0 10px rgba(164,81,53,.07), inset 0 0 18px rgba(75,48,53,.34);
  transform: rotate(-7deg);
}

.tea-ring {
  position: absolute;
  border: 2px solid rgba(164,81,53,.22);
  border-left-color: rgba(36,31,26,.10);
  border-bottom-color: transparent;
  border-radius: 50%;
  filter: blur(.3px);
}
.ring-one { width: 24vw; height: 24vw; right: 6vw; bottom: 8vh; transform: rotate(22deg); }
.ring-two { width: 34vw; height: 34vw; left: 12vw; bottom: 10vh; transform: rotate(-31deg); }

.ink-pool {
  position: absolute;
  right: 8vw;
  top: 30vh;
  width: 38vw;
  height: 30vw;
  background: radial-gradient(ellipse at 50% 54%, rgba(36,31,26,.70), rgba(75,48,53,.38) 34%, rgba(36,31,26,.12) 58%, transparent 78%);
  border-radius: 48% 52% 58% 42% / 44% 60% 40% 56%;
  filter: blur(8px);
  opacity: .76;
  z-index: -1;
}

.vertical-rule {
  position: absolute;
  right: 44vw;
  top: 15vh;
  width: 1px;
  height: 64vh;
  background: linear-gradient(transparent, rgba(36,31,26,.45), transparent);
}

.brush-hair {
  position: absolute;
  right: 39vw;
  top: 12vh;
  width: 1px;
  height: 38vh;
  background: linear-gradient(rgba(36,31,26,.0), rgba(36,31,26,.52), rgba(36,31,26,.0));
  transform: rotate(7deg);
}

.instruction-cloud { position: absolute; inset: 0; }
.instruction {
  width: min(330px, 33vw);
  min-height: 96px;
  padding: 20px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  transform: rotate(var(--r));
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.3s ease;
}
.movement-instructions.in-view .instruction { opacity: 1; transform: rotate(var(--r)) translateY(0); }
.instruction:nth-child(1) { --r: -3deg; right: 12vw; top: 18vh; transition-delay: .12s; transform: rotate(var(--r)) translateY(34px); }
.instruction:nth-child(2) { --r: 5deg; right: 24vw; top: 40vh; transition-delay: .34s; transform: rotate(var(--r)) translateY(34px); }
.instruction:nth-child(3) { --r: -7deg; right: 9vw; top: 62vh; transition-delay: .57s; transform: rotate(var(--r)) translateY(34px); }
.instruction:nth-child(4) { --r: 2deg; left: 21vw; bottom: 10vh; transition-delay: .78s; transform: rotate(var(--r)) translateY(34px); }
.instruction span { font-family: var(--serif); font-size: 2.4rem; color: var(--seal); }
.instruction em { font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; font-style: normal; }

.glyph-trail {
  position: absolute;
  left: 54vw;
  top: 20vh;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.glyph-trail i {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--seal);
  opacity: .42;
  transform: rotate(45deg);
  animation: dotRise 7s ease-in-out infinite;
}
.glyph-trail i:nth-child(2n) { background: var(--indigo); animation-delay: -2s; }
.glyph-trail i:nth-child(3n) { background: var(--moss); animation-delay: -4s; }

.droplet {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50% 45% 55% 48%;
  background: rgba(87,106,124,.50);
  filter: blur(.5px);
}
.d1 { right: 18vw; top: 12vh; }
.d2 { left: 37vw; bottom: 22vh; background: rgba(164,81,53,.42); }

.washi-field { position: absolute; inset: 0; pointer-events: none; }
.washi {
  width: 180px;
  height: 70px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 4rem;
  letter-spacing: .08em;
  color: rgba(36,31,26,.64);
}
.washi:nth-child(1) { right: 16vw; top: 18vh; transform: rotate(-4deg); }
.washi:nth-child(2) { right: 8vw; top: 49vh; transform: rotate(7deg); }
.washi:nth-child(3) { left: 16vw; bottom: 18vh; transform: rotate(-9deg); }

.final-seal {
  position: absolute;
  right: 18vw;
  bottom: 20vh;
  width: clamp(124px, 15vw, 184px);
  height: clamp(124px, 15vw, 184px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  background: rgba(164,81,53,.88);
  color: rgba(231,221,200,.88);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 5rem);
  border: 8px solid rgba(164,81,53,.28);
  box-shadow: inset 0 0 0 2px rgba(231,221,200,.22), 0 26px 60px rgba(75,48,53,.24);
  transform: scale(.74) rotate(-9deg);
  opacity: 0;
  transition: opacity 1.4s ease 1s, transform 1.4s cubic-bezier(.15,.78,.2,1) 1s;
}
.movement-return.still .final-seal { opacity: 1; transform: scale(1) rotate(-3deg); }

.floating { will-change: transform; transition: transform .25s ease-out; }
.movement { opacity: .55; transition: opacity 1s ease; }
.movement.in-view { opacity: 1; }

@keyframes placeLetter {
  0% { opacity: 0; transform: translateY(44px) rotate(-6deg); filter: blur(8px); }
  62% { opacity: .88; filter: blur(.8px); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); filter: blur(0); }
}

@keyframes washDrift {
  from { transform: translate3d(-1vw, -1vh, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(2vw, 2vh, 0) rotate(3deg) scale(1.05); }
}

@keyframes dotRise {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .20; }
  50% { transform: translateY(-18px) rotate(45deg); opacity: .62; }
}

@media (max-width: 760px) {
  .thread-nav { right: 14px; }
  .movement { min-height: 105vh; padding: 12vh 7vw; }
  .title-assembly { font-size: 22vw; flex-wrap: wrap; width: 86vw; }
  .arrival-poem, .gate-poem, .disassembly-poem, .return-poem { margin-left: 4vw; margin-top: 8vh; }
  .cut-word { font-size: 31vw; }
  .movement-gate.in-view .cut-word { transform: none; }
  .stacked { font-size: 23vw; }
  .instruction { width: 68vw; }
  .instruction:nth-child(1), .instruction:nth-child(2), .instruction:nth-child(3) { right: 9vw; }
  .instruction:nth-child(4) { left: 8vw; }
  .broken { font-size: 19vw; }
  .return-word { font-size: 24vw; letter-spacing: .05em; }
  .label-side { right: 8vw; }
}