:root {
  /* Interpret “concurrent” through tangible woven motion. */
  --ink-black: #17120E;
  --unbleached-linen: #E8DDC8;
  --clay-vermilion: #B64A2E;
  --indigo-thread: #243B63;
  --moss-patina: #6F7D52;
  --moon-milk: #F6F0E3;
  --soot-gold: #C7A15A;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ceremonial: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --body: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --token: "Gabarito", Inter, ui-rounded, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--ink-black); color: var(--ink-black); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  overflow-x: hidden;
  background: radial-gradient(circle at 70% 20%, rgba(36, 59, 99, 0.65), transparent 34%), var(--ink-black);
}

button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.loom { position: relative; min-height: 740vh; background: var(--ink-black); }

.opening-room {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  background:
    radial-gradient(circle at 30% 22%, rgba(199, 161, 90, 0.12), transparent 18%),
    radial-gradient(circle at 62% 56%, rgba(36, 59, 99, 0.9), transparent 34%),
    linear-gradient(135deg, #17120E 0%, #243B63 62%, #17120E 100%);
  transition: opacity 900ms ease, transform 900ms ease, visibility 900ms ease;
}

.loom[data-awake="true"] .opening-room { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }

.night-grain,
.warp-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(90deg, rgba(246, 240, 227, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(246, 240, 227, 0.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(246, 240, 227, 0.08) 1px, transparent 1.6px);
  background-size: 37px 100%, 100% 43px, 13px 13px;
}

.stitched-title { position: relative; width: min(92vw, 980px); text-align: center; padding: 44px 20px; }

.stitched-title h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 10vw, 9.6rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  color: var(--moon-milk);
  text-shadow: 0 2px 0 rgba(199, 161, 90, 0.22), 0 18px 48px rgba(0, 0, 0, 0.42);
  font-variation-settings: "SOFT" 85, "WONK" 1;
}

.title-thread {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 20px;
  opacity: 0.8;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
  animation: titleSlack 4.8s ease-in-out infinite alternate;
}

.title-thread.indigo { top: 42%; background: var(--indigo-thread); transform: rotate(-1.2deg); }
.title-thread.clay { top: 49%; background: var(--clay-vermilion); transform: rotate(0.8deg); animation-delay: -1s; }
.title-thread.moss { top: 55%; background: var(--moss-patina); transform: rotate(-0.4deg); animation-delay: -2s; }
.title-thread.gold { top: 61%; background: var(--soot-gold); transform: rotate(1.4deg); animation-delay: -3s; }

@keyframes titleSlack { from { scale: 0.985 1; } to { scale: 1.015 1; } }

.start-stamp,
.artifact-button {
  border: 1px solid rgba(23, 18, 14, 0.55);
  background: var(--clay-vermilion);
  color: var(--moon-milk);
  padding: 12px 20px;
  border-radius: 4px 16px 5px 14px;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(23, 18, 14, 0.24), inset 0 0 0 2px rgba(246, 240, 227, 0.14);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.start-stamp { z-index: 2; font-family: var(--ceremonial); }
.start-stamp:hover, .artifact-button:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 16px 32px rgba(23, 18, 14, 0.32); }

.opening-caption { z-index: 2; margin: 0; font-family: var(--ceremonial); color: rgba(246, 240, 227, 0.74); letter-spacing: 0.08em; }

.bead-nav {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 20;
  display: flex;
  gap: 15px;
  padding: 12px 18px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 700ms ease 300ms;
}

.loom[data-awake="true"] .bead-nav { opacity: 1; }
.nav-cord { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(23, 18, 14, 0.45); box-shadow: 0 1px 0 rgba(246,240,227,0.18); }

.bead {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(23, 18, 14, 0.45);
  border-radius: 50% 44% 50% 47%;
  background: var(--unbleached-linen);
  cursor: pointer;
  box-shadow: inset -4px -5px 0 rgba(23, 18, 14, 0.08), 0 5px 12px rgba(23,18,14,0.24);
}
.bead span { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font: 10px var(--token); color: var(--moon-milk); text-shadow: 0 1px 4px var(--ink-black); opacity: 0; transition: opacity 200ms ease; }
.bead:hover span, .bead.active span { opacity: 1; }
.bead.active { background: var(--soot-gold); transform: translateY(3px); }

.scroll-field { height: 640vh; padding-top: 100vh; }
.sticky-window { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--unbleached-linen); }

.tapestry {
  position: relative;
  width: 7200px;
  height: 100vh;
  min-height: 720px;
  transform: translate3d(0, 0, 0);
  background:
    linear-gradient(90deg, rgba(23,18,14,0.08) 1px, transparent 1px) 0 0/210px 100%,
    radial-gradient(circle at 18% 70%, rgba(182, 74, 46, 0.10), transparent 12%),
    radial-gradient(circle at 55% 18%, rgba(36, 59, 99, 0.13), transparent 18%),
    radial-gradient(circle at 82% 76%, rgba(111, 125, 82, 0.14), transparent 16%),
    var(--unbleached-linen);
  box-shadow: inset 0 0 80px rgba(23, 18, 14, 0.18);
}

.tapestry::before,
.tapestry::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tapestry::before {
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(23,18,14,0.15) 0.7px, transparent 1.2px);
  background-size: 9px 11px;
}
.tapestry::after {
  background: linear-gradient(90deg, rgba(23,18,14,0.22), transparent 3%, transparent 97%, rgba(23,18,14,0.25));
}

.sashiko {
  position: absolute;
  z-index: 1;
  width: 560px;
  height: 180px;
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(90deg, rgba(23,18,14,0.42) 0 12px, transparent 12px 27px),
    repeating-linear-gradient(0deg, rgba(23,18,14,0.22) 0 10px, transparent 10px 26px);
  background-size: 100% 2px, 2px 100%;
  border-radius: 49% 45% 51% 47%;
  transform: rotate(var(--sashiko-tilt, -4deg));
}
.sashiko-one { left: 520px; top: 560px; --sashiko-tilt: -7deg; }
.sashiko-two { left: 3540px; top: 90px; --sashiko-tilt: 5deg; }
.sashiko-three { left: 5840px; top: 585px; --sashiko-tilt: -2deg; }

.thread-map { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.thread { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: url(#softShadow); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); transition: stroke-width 260ms ease; }
.thread-indigo { stroke: var(--indigo-thread); }
.thread-clay { stroke: var(--clay-vermilion); stroke-dasharray: 0.035 0.018; stroke-width: 7; }
.thread-moss { stroke: var(--moss-patina); stroke-dasharray: 0.018 0.012; }
.thread-gold { stroke: var(--soot-gold); stroke-width: 6; stroke-dasharray: 0.06 0.022; }
.thread.pulse { stroke-width: 13; }

.token {
  position: absolute;
  z-index: 6;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50% 46% 50% 42%;
  border: 2px solid rgba(23, 18, 14, 0.34);
  background: var(--moon-milk);
  color: var(--ink-black);
  box-shadow: 0 16px 24px rgba(23,18,14,0.22), inset -5px -6px 0 rgba(23,18,14,0.07);
  transform: translate(-50%, -50%);
}
.token span { font-size: 25px; transform-origin: 50% 10%; animation: tokenSwing 3.8s ease-in-out infinite; }
.token-bell { color: var(--soot-gold); }
.token-leaf { color: var(--moss-patina); }
.token-star { color: var(--indigo-thread); }
.token-bowl { color: var(--clay-vermilion); }
@keyframes tokenSwing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }

.traveler-key {
  position: absolute;
  left: 110px;
  bottom: 54px;
  z-index: 7;
  display: grid;
  gap: 9px;
  padding: 18px 20px;
  min-width: 210px;
  background: rgba(246, 240, 227, 0.68);
  border: 1px solid rgba(23,18,14,0.22);
  box-shadow: 0 18px 42px rgba(23,18,14,0.16), inset 0 0 0 6px rgba(232,221,200,0.35);
  clip-path: polygon(0 5%, 95% 0, 100% 88%, 88% 100%, 4% 96%);
}
.traveler-key p { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 0.82rem var(--token); letter-spacing: 0.04em; color: rgba(23,18,14,0.78); }
.traveler-key b { width: 31px; height: 5px; border-radius: 20px; box-shadow: 0 3px 6px rgba(23,18,14,0.16); }
.key-indigo { background: var(--indigo-thread); }
.key-gold { background: var(--soot-gold); }
.key-moss { background: var(--moss-patina); }
.key-clay { background: var(--clay-vermilion); }

.scene {
  position: absolute;
  z-index: 5;
  width: 470px;
  padding: 30px 32px 28px;
  background: rgba(246, 240, 227, 0.82);
  border: 1px solid rgba(23, 18, 14, 0.26);
  box-shadow: 0 28px 60px rgba(23,18,14,0.20), inset 0 0 0 8px rgba(232, 221, 200, 0.45);
  clip-path: polygon(2% 3%, 98% 0, 96% 92%, 86% 100%, 6% 97%, 0 12%);
  opacity: 0.35;
  transform: translateY(24px) rotate(var(--tilt, -1deg));
  transition: opacity 500ms ease, transform 500ms ease;
}
.scene.active { opacity: 1; transform: translateY(0) rotate(var(--tilt, -1deg)); }
.scene::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(23,18,14,0.18); pointer-events: none; }
.chapter-mark { font-family: var(--ceremonial); color: var(--clay-vermilion); font-size: 0.85rem; letter-spacing: 0.12em; }
.scene h2 { margin: 12px 0 12px; font-family: var(--display); font-size: clamp(2rem, 3vw, 3.15rem); line-height: 0.95; letter-spacing: -0.045em; color: var(--ink-black); }
.scene p { margin: 0 0 20px; font-size: 1rem; line-height: 1.65; color: rgba(23,18,14,0.82); }
.scene-first { left: 310px; top: 170px; --tilt: -1.5deg; }
.scene-split { left: 1450px; top: 430px; --tilt: 1.2deg; }
.scene-kiln { left: 2640px; top: 165px; --tilt: -0.7deg; }
.scene-bells { left: 3830px; top: 505px; --tilt: 1.7deg; }
.scene-knot { left: 5030px; top: 230px; --tilt: -1deg; }
.scene-horizon { left: 6250px; top: 390px; --tilt: 0.8deg; }

.artifact-button { background: var(--indigo-thread); font-family: var(--token); padding: 10px 16px; font-size: 0.92rem; }
.artifact-button.seal { background: var(--clay-vermilion); border-radius: 50%; width: 74px; height: 74px; padding: 0; }

.folded-map, .kiln-rings, .bell-row { margin-top: 22px; }
.folded-map { width: 150px; height: 82px; display: grid; place-items: center; background: linear-gradient(115deg, rgba(36,59,99,0.18), rgba(246,240,227,0.6)); border: 1px solid rgba(36,59,99,0.42); font-family: var(--ceremonial); font-size: 0.75rem; color: var(--indigo-thread); transform: rotate(-3deg); }
.kiln-rings i { display: inline-block; width: 42px; height: 42px; margin-right: -10px; border: 2px solid var(--clay-vermilion); border-radius: 50%; opacity: 0.55; animation: kilnBreath 2.8s ease-in-out infinite; }
.kiln-rings i:nth-child(2) { animation-delay: 0.4s; }
.kiln-rings i:nth-child(3) { animation-delay: 0.8s; }
@keyframes kilnBreath { 50% { transform: scale(1.16); opacity: 0.85; } }
.bell-row b { display: inline-block; width: 28px; height: 34px; margin-right: 14px; background: var(--soot-gold); border-radius: 16px 16px 10px 10px; clip-path: polygon(30% 0, 70% 0, 82% 52%, 100% 100%, 0 100%, 18% 52%); transform-origin: 50% 0; animation: bellChime 3.6s ease-in-out infinite; }
.bell-row b:nth-child(2) { background: var(--moss-patina); animation-delay: 0.2s; }
.bell-row b:nth-child(3) { background: var(--indigo-thread); animation-delay: 0.4s; }
.bell-row b:nth-child(4) { background: var(--clay-vermilion); animation-delay: 0.6s; }
@keyframes bellChime { 0%,75%,100% { transform: rotate(0); } 82% { transform: rotate(10deg); } 90% { transform: rotate(-8deg); } }

.confluence { position: absolute; z-index: 4; width: 130px; height: 130px; border-radius: 50%; border: 2px dotted rgba(182,74,46,0.65); background: radial-gradient(circle, rgba(199,161,90,0.3), transparent 63%); transform: translate(-50%, -50%) scale(0.75); opacity: 0.55; transition: transform 400ms ease, opacity 400ms ease; }
.confluence span { position: absolute; inset: 37px; border: 9px double var(--clay-vermilion); border-radius: 44% 50% 46% 48%; animation: knotTurn 7s linear infinite; }
.confluence.lit { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.c1 { left: 1630px; top: 360px; }
.c2 { left: 3260px; top: 555px; }
.c3 { left: 5140px; top: 610px; }
@keyframes knotTurn { to { rotate: 360deg; } }

.ceramic-seal {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 86px;
  height: 78px;
  border-radius: 42% 51% 47% 45%;
  font-family: var(--ceremonial);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(246,240,227,0.88);
  background:
    radial-gradient(circle at 28% 24%, rgba(246,240,227,0.20), transparent 22%),
    linear-gradient(145deg, var(--clay-vermilion), #8f3622);
  box-shadow: 0 14px 28px rgba(23,18,14,0.22), inset -8px -10px 0 rgba(23,18,14,0.12);
  transform: rotate(var(--seal-tilt, -8deg));
}
.ceramic-seal::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(246,240,227,0.40);
  border-radius: inherit;
}
.seal-one { left: 2060px; top: 122px; --seal-tilt: 9deg; }
.seal-two { left: 4470px; top: 730px; --seal-tilt: -11deg; }
.seal-three { left: 6720px; top: 195px; --seal-tilt: 5deg; }

.moon-stains { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0.28; }
.stain-one { left: 870px; top: 80px; width: 380px; height: 280px; background: var(--indigo-thread); }
.stain-two { left: 3080px; top: 470px; width: 450px; height: 320px; background: var(--clay-vermilion); }
.stain-three { left: 5940px; top: 70px; width: 520px; height: 360px; background: var(--moss-patina); }

.constellation { position: absolute; left: 4650px; top: 100px; width: 420px; height: 190px; }
.constellation i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--soot-gold); box-shadow: 0 0 18px var(--soot-gold); }
.constellation i:nth-child(1) { left: 20px; top: 120px; }
.constellation i:nth-child(2) { left: 92px; top: 40px; }
.constellation i:nth-child(3) { left: 180px; top: 85px; }
.constellation i:nth-child(4) { left: 260px; top: 20px; }
.constellation i:nth-child(5) { left: 330px; top: 130px; }
.constellation i:nth-child(6) { left: 390px; top: 60px; }

.footprints { position: absolute; z-index: 2; font-family: var(--ceremonial); color: rgba(23,18,14,0.25); letter-spacing: 14px; transform: rotate(-12deg); }
.fp-one { left: 1080px; top: 710px; }
.fp-two { left: 5660px; top: 825px; transform: rotate(9deg); }

@media (max-width: 760px) {
  .scene { width: 360px; padding: 24px; }
  .bead-nav { gap: 8px; top: 12px; }
  .bead { width: 22px; height: 22px; }
  .opening-caption { padding: 0 24px; text-align: center; }
  .traveler-key { transform: scale(0.86); transform-origin: left bottom; }
}