:root {
  /* Typography compliance note: IBM Plex Sans Condensed** Condensed* to provide a conservation-lab contrast without becoming techy. Use **Gochi Hand** Hand* very sparingly for one or two hand-marked labels. Source Serif 4** 4* for reflective paragraphs and object captions. */
  --bone-paper: #F3EBDD;
  --ink-umber: #2A211C;
  --fired-clay: #A45A3F;
  --oxide-blue-gray: #667A7A;
  --linen-shadow: #C9B9A1;
  --kintsugi-thread-gold: #D8A33A;
  --deep-lacquer: #16100D;
  --faded-persimmon: #D16B4B;
  --display: Fraunces, Georgia, Cambria, "Times New Roman", serif;
  --body: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --lab: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --hand: "Gochi Hand", "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-umber);
  background:
    radial-gradient(circle at 18% 12%, rgba(216, 163, 58, .10), transparent 23rem),
    radial-gradient(circle at 82% 40%, rgba(102, 122, 122, .12), transparent 30rem),
    linear-gradient(100deg, rgba(201, 185, 161, .34), transparent 38%, rgba(164, 90, 63, .08)),
    var(--bone-paper);
  font-family: var(--body);
  overflow-x: hidden;
}

.paper-grain,
.table-shadow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.paper-grain {
  opacity: .38;
  background-image:
    linear-gradient(90deg, rgba(42, 33, 28, .035) 1px, transparent 1px),
    linear-gradient(rgba(42, 33, 28, .025) 1px, transparent 1px),
    radial-gradient(circle, rgba(42, 33, 28, .10) 1px, transparent 1.5px);
  background-size: 88px 88px, 54px 54px, 17px 17px;
  mix-blend-mode: multiply;
}

.table-shadow {
  background: radial-gradient(ellipse at 50% 52%, rgba(22, 16, 13, .11), transparent 55%);
}

.continuity-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 600vh;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.thread-path,
.thread-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread-shadow {
  stroke: rgba(42, 33, 28, .18);
  stroke-width: 10;
  filter: blur(7px);
  transform: translate(7px, 10px);
}

.thread-path {
  stroke: var(--kintsugi-thread-gold);
  stroke-width: 5.5;
  filter: drop-shadow(0 0 8px rgba(216, 163, 58, .45));
  transition: stroke-width .8s ease, filter .8s ease, opacity .8s ease;
}

body.material-crack .thread-path { stroke-width: 8; filter: drop-shadow(0 0 10px rgba(216, 163, 58, .68)); }
body.material-route .thread-path { stroke-width: 3.5; stroke-dasharray: 26 12; }
body.material-stitch .thread-path { stroke-width: 4.5; stroke-dasharray: 12 18; }
body.material-staff .thread-path { stroke-width: 2.8; filter: drop-shadow(0 0 5px rgba(216, 163, 58, .38)); }
body.material-knot .thread-path { stroke-width: 5; stroke-dasharray: none; animation: threadBreath 4.8s ease-in-out infinite; }

.atelier { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 9vw 1.1fr .8fr 8vw;
  grid-template-rows: 16vh 1fr 20vh;
  isolation: isolate;
}

.scene-number {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font: 600 clamp(.78rem, 1.2vw, 1rem)/1 var(--lab);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(42, 33, 28, .62);
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--deep-lacquer);
}

h1 { font-size: clamp(5rem, 16vw, 16rem); line-height: .76; }
h2 { font-size: clamp(3.2rem, 7vw, 8rem); line-height: .82; }

.poem {
  font-size: clamp(1.25rem, 2.4vw, 2.35rem);
  line-height: 1.25;
  margin: 1.2rem 0 0;
  max-width: 14em;
}

.hero-mark {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: center;
  transform: translateY(-3vh);
}

.washi-sheet,
.tracing-paper,
.linen-swatch,
.final-note,
.annotation-column {
  position: relative;
  background:
    linear-gradient(110deg, rgba(255,255,255,.24), transparent 40%),
    rgba(243, 235, 221, .78);
  border: 1px solid rgba(42, 33, 28, .12);
  box-shadow: 0 28px 60px rgba(42, 33, 28, .12), inset 0 0 34px rgba(201, 185, 161, .22);
  padding: clamp(1.4rem, 3vw, 3.5rem);
}

.opening-note {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  max-width: 24rem;
  transform: rotate(2deg);
}

.hand-label {
  display: inline-block;
  color: var(--faded-persimmon);
  font-family: var(--hand);
  font-size: 1.5rem;
  transform: rotate(-5deg);
}

.bookbinding-holes {
  position: absolute;
  left: 4vw;
  top: 30vh;
  display: grid;
  gap: 2.2rem;
}

.bookbinding-holes span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--deep-lacquer);
  box-shadow: inset 2px 2px 3px rgba(255,255,255,.18), 0 0 0 8px rgba(201,185,161,.25);
  opacity: .7;
}

.ceramic-shard {
  position: absolute;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(135deg, rgba(201, 185, 161, .34), rgba(243, 235, 221, .88));
  border: 1px solid rgba(42, 33, 28, .18);
  box-shadow: 0 34px 70px rgba(42, 33, 28, .18), inset 0 0 45px rgba(102, 122, 122, .11);
  clip-path: polygon(10% 8%, 70% 0, 95% 32%, 82% 88%, 31% 100%, 0 62%);
}

.shard-large { width: 42vw; height: 54vh; left: 12vw; top: 28vh; transform: rotate(-8deg); }
.shard-small { width: 19vw; height: 26vh; right: 13vw; top: 19vh; transform: rotate(17deg); opacity: .9; }

.seam-glow {
  position: absolute;
  left: 45%;
  top: 5%;
  width: 7px;
  height: 92%;
  background: var(--kintsugi-thread-gold);
  clip-path: polygon(45% 0, 75% 15%, 42% 32%, 88% 54%, 51% 70%, 62% 100%, 18% 100%, 31% 72%, 0 55%, 30% 33%, 8% 14%);
  box-shadow: 0 0 22px rgba(216, 163, 58, .75);
  animation: seamFill 5s ease-in-out infinite;
}

.torn-detail { grid-column: 3; grid-row: 2; align-self: center; transform: rotate(1.5deg); }
.fragment-caption { font: 600 .86rem/1.4 var(--lab); letter-spacing: .13em; text-transform: uppercase; color: var(--oxide-blue-gray); }

.repair-tag {
  position: absolute;
  z-index: 8;
  padding: .58rem .8rem;
  background: var(--fired-clay);
  color: var(--bone-paper);
  font: 700 .85rem/1 var(--lab);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(42, 33, 28, .18);
}
.repair-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .55rem; background: var(--bone-paper); }
.tag-break { left: 55vw; top: 63vh; transform: rotate(-6deg); }
.tag-repair { right: 14vw; top: 26vh; transform: rotate(4deg); }
.final-tag { left: 50%; bottom: 15vh; transform: translateX(-50%) rotate(-2deg); background: var(--oxide-blue-gray); }

.inventory-board { grid-column: 2 / 4; grid-row: 2; position: relative; }
.fragment {
  position: absolute;
  background: rgba(243, 235, 221, .72);
  border: 1px solid rgba(42, 33, 28, .14);
  box-shadow: 0 24px 52px rgba(42, 33, 28, .14);
  clip-path: polygon(16% 0, 92% 12%, 100% 72%, 62% 100%, 8% 87%, 0 26%);
}
.fragment span { position: absolute; right: 1rem; bottom: .8rem; font: 700 1rem var(--lab); color: var(--fired-clay); }
.f1 { width: 24vw; height: 30vh; left: 4vw; top: 14vh; transform: rotate(-13deg); }
.f2 { width: 19vw; height: 24vh; left: 32vw; top: 2vh; transform: rotate(8deg); }
.f3 { width: 29vw; height: 33vh; right: 8vw; top: 26vh; transform: rotate(-4deg); }
.f4 { width: 15vw; height: 20vh; left: 24vw; top: 46vh; transform: rotate(19deg); }

.annotation-column { grid-column: 2; grid-row: 2; align-self: end; max-width: 34rem; z-index: 3; background: rgba(243, 235, 221, .86); }
.tide-rings { position: absolute; right: 9vw; top: 16vh; width: 27vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(102,122,122,.33); box-shadow: inset 0 0 0 34px rgba(102,122,122,.05), inset 0 0 0 72px rgba(102,122,122,.04); }

.linen-swatch { grid-column: 2; grid-row: 2; align-self: center; max-width: 38rem; background: repeating-linear-gradient(90deg, rgba(201,185,161,.18), rgba(201,185,161,.18) 2px, transparent 2px, transparent 12px), rgba(243,235,221,.75); }
.stitch-field { grid-column: 3; grid-row: 2; align-self: center; display: grid; gap: 2.1rem; transform: rotate(-3deg); }
.stitch-field span { display: block; width: min(35vw, 34rem); height: 2px; background: rgba(42,33,28,.18); position: relative; }
.stitch-field span::after { content: ""; position: absolute; left: 15%; top: -9px; width: 70%; height: 20px; border-top: 3px dashed var(--kintsugi-thread-gold); border-radius: 50%; animation: stitchTension 4.2s ease-in-out infinite; }
.bent-pin { position: absolute; width: 5rem; height: .28rem; background: var(--kintsugi-thread-gold); border-radius: 99px; box-shadow: 0 7px 14px rgba(42,33,28,.2); }
.pin-one { right: 24vw; top: 23vh; transform: rotate(28deg); }
.pin-two { right: 8vw; bottom: 24vh; transform: rotate(-18deg); }

.staff-lines { grid-column: 1 / 5; grid-row: 2; align-self: center; display: grid; gap: 1.15rem; opacity: .48; }
.staff-lines i { display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--oxide-blue-gray), transparent); }
.tracing-paper { grid-column: 2 / 4; grid-row: 2; align-self: center; justify-self: center; max-width: 48rem; background: rgba(243,235,221,.56); backdrop-filter: blur(2px); transform: rotate(-1deg); }
.echo-marks { position: absolute; right: 15vw; bottom: 24vh; }
.echo-marks span { display: block; width: 8rem; height: 3rem; border-top: 2px solid rgba(216,163,58,.58); border-radius: 50%; margin: -1.3rem; transform: rotate(-15deg); }

.continuing-mark { min-height: 112vh; }
.final-note { grid-column: 2 / 4; grid-row: 2; align-self: center; justify-self: center; max-width: 44rem; text-align: center; background: transparent; border: 0; box-shadow: none; }
.knot-marker { position: absolute; left: 50%; top: 54vh; width: 8rem; height: 8rem; transform: translate(-50%, -50%); border: 4px solid var(--kintsugi-thread-gold); border-radius: 58% 42% 55% 45%; box-shadow: 0 0 28px rgba(216,163,58,.44); animation: knotTighten 5.5s ease-in-out infinite; }
.knot-marker span { position: absolute; inset: 1.3rem; border: 2px solid var(--kintsugi-thread-gold); border-radius: 45% 55% 40% 60%; transform: rotate(34deg); }

.material-register {
  position: fixed;
  right: 2rem;
  bottom: 1.8rem;
  z-index: 10;
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .7rem .9rem;
  background: rgba(243,235,221,.74);
  border: 1px solid rgba(42,33,28,.14);
  box-shadow: 0 12px 34px rgba(42,33,28,.12);
  font: 700 .82rem/1 var(--lab);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.register-index { color: var(--fired-clay); }
.register-name { color: var(--oxide-blue-gray); }

.scene > *:not(.scene-number) { transition: transform 1.2s ease, opacity 1.2s ease; }
.scene:not(.is-active) > *:not(.scene-number) { opacity: .72; }
.scene.is-active .washi-sheet,
.scene.is-active .linen-swatch,
.scene.is-active .tracing-paper,
.scene.is-active .final-note { transform: translateY(var(--slip, 0)) rotate(var(--tilt, 0deg)); }

@keyframes seamFill { 0%, 100% { opacity: .56; transform: scaleY(.86); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes stitchTension { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(7px); } }
@keyframes knotTighten { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(.95); } 50% { transform: translate(-50%, -50%) rotate(7deg) scale(1.03); } }
@keyframes threadBreath { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  .scene { grid-template-columns: 7vw 1fr 7vw; grid-template-rows: 14vh auto 1fr; min-height: 105vh; }
  .scene-number, .hero-mark, .opening-note, .torn-detail, .annotation-column, .linen-swatch, .tracing-paper, .final-note { grid-column: 2; }
  .opening-note, .torn-detail { grid-row: 3; align-self: start; }
  h1 { font-size: clamp(4.1rem, 23vw, 8rem); }
  .poem { font-size: 1.32rem; }
  .shard-large { width: 66vw; left: 6vw; }
  .shard-small { width: 34vw; right: 4vw; }
  .stitch-field { grid-column: 2; grid-row: 3; }
  .material-register { left: 1rem; right: auto; bottom: 1rem; }
}