:root {
  /* Typography compliance tokens: Mono* Mono** from used sparingly IDs */
  --paper: #F7F3EA;
  --ink: #11110F;
  --vermilion: #C94B36;
  --indigo: #26324A;
  --linen: #D8D0C2;
  --bamboo: #A48B63;
  --white: #FFFFFF;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Noto Sans JP", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", monospace;
  --ease: cubic-bezier(.22, .61, .18, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

@keyframes paper-breath {
  0%, 100% { opacity: .42; }
  50% { opacity: .62; }
}

a { color: inherit; text-decoration: none; }

.paper-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.86) 0 10%, transparent 11%),
    linear-gradient(115deg, rgba(216,208,194,.34), transparent 36%),
    var(--paper);
}

.plane {
  position: absolute;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(216,208,194,.58);
  box-shadow: 0 24px 80px rgba(17,17,15,.06);
  transform: rotate(var(--r));
  animation: paper-breath 16s var(--ease) infinite;
}

.plane-a { width: 38vw; height: 58vh; left: -8vw; top: 16vh; --r: -7deg; }
.plane-b { width: 44vw; height: 42vh; right: -12vw; bottom: 8vh; --r: 5deg; }

.grain {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(90deg, rgba(17,17,15,.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17,17,15,.025) 1px, transparent 1px);
  background-size: 31px 37px;
  mix-blend-mode: multiply;
}

.thread {
  position: fixed;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 28px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
}

.thread-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--indigo);
  opacity: .55;
}

.knot {
  position: relative;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}

.knot i {
  width: 5px;
  height: 5px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform .8s var(--ease), background .8s var(--ease);
}

.knot::before {
  content: attr(data-section);
  position: absolute;
  right: 24px;
  opacity: 0;
  transform: translateX(5px);
  transition: .7s var(--ease);
}

.knot.active i { transform: scale(2.2); background: var(--vermilion); border-radius: 2px; }
.knot.active::before { opacity: 1; transform: translateX(0); }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 7vw, 108px);
  isolation: isolate;
}

.observe > * { transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.observe:not(.in-view) > * { opacity: .15; transform: translateY(42px); }

.blank-table { min-height: 105vh; }

.blank-table h1 {
  position: absolute;
  left: clamp(30px, 8vw, 120px);
  bottom: 14vh;
  margin: 0;
  font-size: clamp(34px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: -.035em;
}

.low-note {
  position: absolute;
  left: clamp(34px, 8.2vw, 124px);
  bottom: 10vh;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.calibration {
  position: absolute;
  top: 18vh;
  left: 16vw;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--indigo);
  transform: rotate(-2deg);
}

.table-mark, .moving-shape { position: absolute; will-change: transform; }
.mark-circle { width: 82px; height: 82px; border-radius: 50%; background: var(--ink); top: 22vh; right: 26vw; }
.mark-square { width: 42px; height: 42px; background: var(--vermilion); top: 58vh; right: 13vw; box-shadow: 0 10px 0 rgba(201,75,54,.12); }
.mark-line { height: 2px; width: 29vw; background: var(--indigo); top: 42vh; left: 41vw; transform: rotate(-9deg); }

.premise-drift { background: linear-gradient(180deg, transparent, rgba(216,208,194,.22)); }
.section-label, .final-label, .section-number {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
}

.section-label { position: absolute; top: 13vh; left: 10vw; display: flex; gap: 1rem; align-items: center; }
.section-label em { font-family: var(--serif); font-size: 18px; text-transform: none; letter-spacing: .02em; color: var(--ink); }

.paper-slips { position: relative; height: 72vh; margin-top: 8vh; }
.slip {
  position: absolute;
  width: min(440px, 70vw);
  padding: 26px 30px 28px;
  background: rgba(255,255,255,.64);
  border: 1px solid var(--linen);
  box-shadow: 0 18px 45px rgba(17,17,15,.09);
}
.slip b { font-family: var(--mono); font-size: 11px; color: var(--bamboo); font-weight: 500; }
.slip p { margin: 12px 0 0; font-size: clamp(25px, 3.2vw, 48px); line-height: .98; }
.slip-one { left: 8vw; top: 15vh; transform: rotate(-2deg); }
.slip-two { right: 15vw; top: 6vh; transform: rotate(1.5deg); transition-delay: .16s; }
.slip-three { left: 25vw; top: 37vh; transform: rotate(.8deg); transition-delay: .32s; }
.slip-four { right: 5vw; top: 48vh; transform: rotate(-1deg); transition-delay: .48s; }

.long-rule { position: absolute; left: 6vw; bottom: 18vh; width: 64vw; height: 2px; background: var(--ink); transform-origin: left; }
.vermilion-stamp { position: absolute; right: 23vw; bottom: 16vh; padding: 9px 11px; background: var(--vermilion); color: var(--paper); font-family: var(--mono); font-size: 10px; text-transform: uppercase; transform: rotate(-4deg); }

.deliberation-fold { background: rgba(247,243,234,.78); }
.fold-plane { position: absolute; top: 0; bottom: 0; left: 47%; width: 13vw; background: linear-gradient(90deg, transparent, var(--linen), rgba(255,255,255,.72), transparent); opacity: .68; }
.fold-copy { position: absolute; max-width: 410px; }
.fold-copy h2, .measure-copy h2, .final-copy h2 { font-size: clamp(48px, 8vw, 110px); line-height: .86; font-weight: 600; letter-spacing: -.04em; margin: 0; }
.fold-copy p, .measure-copy p, .reflection { font-size: clamp(20px, 2vw, 30px); line-height: 1.25; }
.fold-copy span { font-family: var(--mono); color: var(--bamboo); font-size: 12px; text-transform: uppercase; }
.left-copy { left: 9vw; top: 24vh; }
.right-copy { right: 8vw; bottom: 16vh; }
.fold-circle { width: 130px; height: 130px; border-radius: 50%; border: 2px solid var(--ink); left: 12vw; bottom: 12vh; }
.fold-block { width: 92px; height: 170px; background: var(--bamboo); opacity: .82; right: 17vw; top: 13vh; transform: rotate(6deg); }
.fold-bar { width: 2px; height: 58vh; background: var(--indigo); left: 63vw; top: 22vh; transform: rotate(12deg); }

.common-measure { min-height: 110vh; }
.measure-copy { position: absolute; left: 12vw; top: 20vh; width: min(560px, 72vw); z-index: 2; }
.measure-copy p { max-width: 520px; }
.dot-field {
  position: absolute;
  right: 7vw;
  top: 9vh;
  width: 42vw;
  height: 62vh;
  background-image: radial-gradient(var(--ink) 1.3px, transparent 1.3px);
  background-size: 18px 18px;
  mask-image: linear-gradient(130deg, black, transparent 72%);
  opacity: .34;
}
.stripe-band { position: absolute; left: 7vw; bottom: 11vh; width: 74vw; height: 76px; background: repeating-linear-gradient(90deg, var(--indigo) 0 2px, transparent 2px 17px); opacity: .62; }
.checker-strip { position: absolute; right: 19vw; bottom: 25vh; display: grid; grid-template-columns: repeat(4, 24px); grid-auto-rows: 24px; transform: rotate(3deg); }
.checker-strip span:nth-child(odd) { background: var(--ink); }
.checker-strip span:nth-child(even) { background: var(--white); border: 1px solid var(--linen); }
.registration-cross { position: absolute; width: 34px; height: 34px; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--vermilion); }
.registration-cross::before { width: 100%; height: 1px; top: 50%; }
.registration-cross::after { width: 1px; height: 100%; left: 50%; }
.cross-a { right: 12vw; top: 28vh; }
.cross-b { left: 23vw; bottom: 25vh; transform: rotate(45deg); opacity: .55; }

.shared-room { min-height: 100vh; background: linear-gradient(180deg, rgba(216,208,194,.2), var(--paper)); }
.room-constellation { position: absolute; inset: 0; }
.shape { position: absolute; display: block; transition: transform 1.8s var(--ease); }
.ink-disc { width: 118px; height: 118px; border-radius: 50%; background: var(--ink); left: 58vw; top: 22vh; }
.red-seal { width: 44px; height: 44px; background: var(--vermilion); left: 50vw; top: 48vh; }
.bamboo-plane { width: 230px; height: 130px; background: rgba(164,139,99,.35); left: 65vw; top: 52vh; transform: rotate(-5deg); border: 1px solid var(--bamboo); }
.indigo-rule { width: 31vw; height: 3px; background: var(--indigo); left: 38vw; top: 39vh; transform: rotate(-11deg); }
.linen-card { width: 250px; height: 330px; background: rgba(255,255,255,.48); border: 1px solid var(--linen); left: 18vw; top: 19vh; box-shadow: 0 24px 72px rgba(17,17,15,.08); }
.final-copy { position: absolute; left: 10vw; bottom: 12vh; width: min(690px, 78vw); }
.reflection { font-style: italic; margin: 22px 0 34px; }
.quiet-invitation { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }

.in-view .slip-one { transform: translateX(4vw) rotate(-1deg); }
.in-view .slip-two { transform: translateX(-6vw) rotate(.4deg); }
.in-view .slip-three { transform: translateX(-2vw) rotate(0); }
.in-view .slip-four { transform: translateX(-9vw) rotate(-.2deg); }
.in-view .long-rule { transform: scaleX(1); }
.observe:not(.in-view) .long-rule { transform: scaleX(.2) translateY(42px); }

@media (max-width: 760px) {
  .thread { right: .8rem; height: 210px; }
  .chamber { padding: 28px; }
  .mark-circle { right: 20vw; }
  .mark-line { width: 52vw; left: 18vw; }
  .paper-slips { height: 86vh; }
  .slip { width: 76vw; }
  .slip-one, .slip-three { left: 4vw; }
  .slip-two, .slip-four { right: 6vw; }
  .fold-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 15vh 0; }
  .fold-plane { left: 34%; width: 28vw; }
  .dot-field { width: 70vw; right: -8vw; }
  .stripe-band { width: 86vw; }
  .final-copy { left: 8vw; }
  .ink-disc { left: 60vw; }
  .linen-card { left: 6vw; }
}