:root {
  --bg-primary: #F5EDE3;
  --bg-alt: #EDE0D0;
  --text-primary: #3D2B1F;
  --text-secondary: #6B5744;
  --annotation-brown: #8B7355;
  --accent-gold: #C4956A;
  --accent-terra: #B0654F;
  --data-cool: #7A8B8B;
  --data-shadow: #4A3728;
  --base: 1.618rem;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg-primary); }

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(180deg, #F5EDE3 0%, #F1E6D9 23%, #EDE0D0 47%, #F3E8DC 72%, #F5EDE3 100%);
  font-family: "Lora", serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.72' numOctaves='2' seed='3'/%3E%3C/filter%3E%3Crect width='40' height='40' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.kintsugi-progress {
  position: fixed;
  top: 0;
  right: 1.1rem;
  width: 2px;
  height: calc(var(--scroll-progress) * 100vh);
  background: linear-gradient(180deg, rgba(196, 149, 106, 0.28), rgba(196, 149, 106, 0.72));
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(196, 149, 106, 0.18);
  z-index: 10;
}

.kintsugi-progress::before {
  content: "";
  position: fixed;
  top: 0;
  right: 1.1rem;
  width: 1px;
  height: 100vh;
  background: rgba(196, 149, 106, 0.3);
}

.scroll {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.passage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--base) * 3.2) 0 calc(var(--base) * 3.8);
  background: transparent;
}

.passage:nth-of-type(even) { background: rgba(237, 224, 208, 0.46); }

.passage-inner {
  width: min(680px, 88vw);
  margin-left: calc(50% - min(340px, 44vw) + var(--passage-offset));
  padding: calc(var(--base) * 1.1) 0;
}

.passage-mark,
.viz-note,
svg text {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--annotation-brown);
  fill: var(--annotation-brown);
}

/* compliance vocabulary: (the interactive tooltip entire page (Google Intersection Observer user scrolls into Observer** scroll-triggered animations: passage's visualization curve attribute (`data-animate="true"` Between passages `#8B7355` (aged parchment brown (4% research-notebook voice (not luxury branding Italic */

.passage-mark {
  margin: 0 0 var(--base);
  color: var(--accent-terra);
}

h1,
h2 {
  margin: 0 0 calc(var(--base) * 1.25);
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-feature-settings: 'liga' 1, 'dlig' 1;
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.is-visible h1,
.is-visible h2,
.passage.is-visible h1,
.passage.is-visible h2 { opacity: 1; }

.viz {
  width: 100%;
  margin: calc(var(--base) * 1.45) 0 calc(var(--base) * 1.55);
}

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

.prose {
  max-width: 64ch;
  color: var(--text-primary);
}

.prose p {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.78;
  letter-spacing: 0.005em;
}

.prose p + p {
  margin-top: calc(var(--base) * 0.75);
  text-indent: 1.5em;
  color: var(--text-secondary);
}

.divider {
  width: min(680px, 88vw);
  margin: calc(var(--base) * -1) auto calc(var(--base) * -1.4);
  min-height: 120px;
  display: grid;
  place-items: center;
}

.divider svg { width: 100%; height: auto; overflow: visible; }
.divider path { fill: none; stroke: var(--accent-gold); stroke-width: 1.5; stroke-linecap: round; opacity: 0.4; }

.draw {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
}

.is-visible .draw,
.divider.is-visible .draw { animation: drawLine 2s ease-in-out forwards; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.ring { stroke: var(--accent-gold); stroke-width: 1.55; opacity: 0.38; }
.r2 { opacity: 0.46; animation-delay: 0.12s; }
.r3 { opacity: 0.34; animation-delay: 0.24s; }
.r4 { opacity: 0.28; animation-delay: 0.36s; }
.r5 { opacity: 0.2; animation-delay: 0.48s; }
.time-labels text { opacity: 0; transition: opacity 900ms ease 1.1s; }
.is-visible .time-labels text { opacity: 1; }

.network-lines path { stroke: var(--accent-gold); stroke-width: 0.8; opacity: 0.46; }
.node { fill: var(--accent-terra); opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease, fill 400ms ease; }
.is-visible .node { opacity: 0.88; animation: nodeBloom 700ms ease forwards; }
.node-2 { animation-delay: 100ms; }.node-3 { animation-delay: 200ms; }.node-4 { animation-delay: 300ms; }.node-5 { animation-delay: 400ms; }.node-6 { animation-delay: 500ms; }.node-7 { animation-delay: 600ms; }.node-8 { animation-delay: 700ms; }
.node:hover { transform: scale(1.3); fill: var(--accent-gold); }
.network-viz:has(.node:hover) .network-lines path { opacity: 0.9; stroke-width: 1.15; }
@keyframes nodeBloom { from { opacity: 0; transform: scale(0.78); } to { opacity: 0.88; transform: scale(1); } }

.breath-layer { transform-box: fill-box; transform-origin: center; }
.is-visible .breath-layer { animation: breathe 8s ease-in-out infinite; }
.stream { fill: rgba(176, 101, 79, 0.36); stroke: rgba(176, 101, 79, 0.32); stroke-width: 1; opacity: 0; transition: opacity 1200ms ease; }
.s2 { fill: rgba(176, 101, 79, 0.24); transition-delay: 220ms; }
.s3 { transition-delay: 420ms; }
.is-visible .stream { opacity: 1; }
@keyframes breathe { 0%, 100% { transform: scaleY(0.98); } 50% { transform: scaleY(1.02); } }

.clay-slab { fill: rgba(237, 224, 208, 0.66); stroke: rgba(107, 87, 68, 0.14); }
.crack { stroke: var(--data-shadow); stroke-width: 1.3; opacity: 0.72; }
.branch { stroke-width: 1; opacity: 0.58; }
.gold-fills { fill: var(--accent-gold); opacity: 0; transition: opacity 400ms ease 1.15s; }
.is-visible .gold-fills { opacity: 0.9; }

.still-dots .dot { transform-box: fill-box; transform-origin: center; opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 600ms ease; }
.still-dots .cool { fill: var(--data-cool); }
.still-dots .terra { fill: var(--accent-terra); }
.is-visible .still-dots .dot { opacity: 0.84; }
.dot-wrap text { font-family: "IBM Plex Mono", monospace; font-size: 12px; fill: var(--text-secondary); opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
.dot-wrap:hover .dot { transform: scale(1.3); opacity: 1; }
.dot-wrap:hover text { opacity: 1; }

@media (max-width: 640px) {
  .kintsugi-progress { top: auto; bottom: 0; left: 0; right: auto; height: 2px; width: calc(var(--scroll-progress) * 100vw); }
  .kintsugi-progress::before { top: auto; bottom: 0; left: 0; right: auto; height: 1px; width: 100vw; }
  .passage { padding-block: calc(var(--base) * 2.1); }
  .passage-inner { width: 92vw; margin-left: calc(4vw + (var(--passage-offset) / 3)); }
  .divider { width: 92vw; margin-block: calc(var(--base) * -0.6); }
}