:root {
  --fired-clay: #A94E32;
  --ochre-plaster: #C99A49;
  --rice-paper: #EFE4D0;
  --charcoal-ink: #25211B;
  --moss-shadow: #586347;
  --muted-indigo: #2F4A5A;
  --raw-umber: #6C4A2E;
  --bell-brass: #D4A84F;
  --display: "Staatliches", "Impact", "Arial Narrow", sans-serif;
  --serif: "Shippori Mincho", "Times New Roman", serif;
  --interface: "Space Grotesk", "Inter", system-ui, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

/* Typography intent: Space Grotesk** for small labels; deliberate eclectic-hybrid voice that feels poster-like. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 154, 73, 0.10), transparent 26rem),
    linear-gradient(180deg, var(--charcoal-ink), #1b1814 48%, var(--charcoal-ink));
  font-family: var(--interface);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(239, 228, 208, .28) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(239, 228, 208, .18) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 228, 208, .04) 1px, transparent 1px);
  background-size: 21px 21px, 31px 31px, 7px 7px;
}

.ritual-scroll { position: relative; }

.panel {
  min-height: 108vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 5.5rem);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(239, 228, 208, .08);
  z-index: -1;
}

.side-markers {
  position: fixed;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .72rem;
  z-index: 25;
}

.marker {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--rice-paper);
  text-decoration: none;
  font-family: var(--jp);
  font-size: .68rem;
  border: 1px solid rgba(239, 228, 208, .28);
  background: rgba(37, 33, 27, .55);
  box-shadow: inset 0 0 0 4px rgba(201, 154, 73, .05);
  transition: background .7s ease, border-color .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.marker.active {
  background: var(--fired-clay);
  border-color: var(--bell-brass);
  color: var(--rice-paper);
}

.magnetic { transition: transform .8s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.parallax { will-change: transform; }

.panel-strike {
  background:
    linear-gradient(180deg, rgba(37, 33, 27, .95), rgba(37, 33, 27, .88)),
    radial-gradient(circle at 52% 26%, rgba(212, 168, 79, .09), transparent 20rem);
}

.low-horizon {
  position: absolute;
  left: 7vw;
  right: 10vw;
  bottom: 24vh;
  height: 1px;
  background: rgba(239, 228, 208, .38);
}

.bell-circle {
  position: absolute;
  width: clamp(14rem, 32vw, 31rem);
  aspect-ratio: 1;
  border-radius: 50%;
  left: 47vw;
  top: 10vh;
  background:
    radial-gradient(circle at 38% 32%, rgba(239, 228, 208, .24), transparent 18%),
    var(--ochre-plaster);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.26), inset -1.4rem -1.4rem 0 rgba(108, 74, 46, .18);
}

.bell-circle::after {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid rgba(37, 33, 27, .22);
  border-radius: 50%;
}

.hero-word {
  grid-column: 2 / span 5;
  align-self: end;
  padding-bottom: 13vh;
  z-index: 2;
}

h1, h2, .chapter-number {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: .075em;
  line-height: .84;
}

h1 {
  font-size: clamp(4.8rem, 13vw, 15rem);
  color: var(--rice-paper);
  text-shadow: .08em .08em 0 rgba(169, 78, 50, .32);
}

h2 {
  font-size: clamp(4rem, 11vw, 12rem);
  color: var(--charcoal-ink);
}

.micro, .folded-tab, .paper-tab, .stamp-row, .marker::after {
  font-family: var(--interface);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
}

.jp { font-family: var(--jp); color: var(--bell-brass); }

.serif-line, .chapter-copy p, .measure-text p, .gather-copy p, .remain-copy p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  line-height: 1.65;
  max-width: 38rem;
}

.resonance { display: flex; gap: .65rem; }
.resonance i {
  width: .74rem;
  height: .74rem;
  border-radius: 50%;
  background: var(--bell-brass);
  display: block;
  animation: bell-breathe 5.8s ease-in-out infinite;
}
.resonance i:nth-child(2) { animation-delay: .38s; }
.resonance i:nth-child(3) { animation-delay: .76s; }

@keyframes bell-breathe {
  0%, 100% { transform: translateY(0); opacity: .62; }
  50% { transform: translateY(-.28rem); opacity: 1; }
}
.resonance-a { position: absolute; left: 61vw; top: 54vh; opacity: .82; }

.paper-tab {
  position: absolute;
  right: 18vw;
  bottom: 17vh;
  padding: .8rem 1rem;
  color: var(--charcoal-ink);
  background: var(--rice-paper);
  transform: rotate(-2deg);
}

.panel-settle {
  background: var(--rice-paper);
  color: var(--charcoal-ink);
}

.clay-curtain {
  position: absolute;
  width: 46vw;
  height: 54vh;
  background: var(--fired-clay);
  left: 9vw;
  top: 19vh;
  box-shadow: 1.4rem 1.4rem 0 rgba(108, 74, 46, .16);
}

.moss-plane {
  position: absolute;
  width: 32vw;
  height: 72vh;
  right: 6vw;
  top: 8vh;
  background: var(--moss-shadow);
  opacity: .84;
}

.chapter-copy {
  grid-column: 3 / span 5;
  align-self: center;
  z-index: 2;
  color: var(--rice-paper);
  mix-blend-mode: multiply;
}

.chapter-number {
  display: block;
  color: var(--bell-brass);
  font-size: clamp(3rem, 8vw, 8rem);
}

.moon-arc {
  position: absolute;
  right: 18vw;
  bottom: 13vh;
  width: 18rem;
  height: 9rem;
  border: 2.2rem solid var(--muted-indigo);
  border-bottom: 0;
  border-radius: 18rem 18rem 0 0;
}

.stamp-row {
  position: absolute;
  right: 10vw;
  top: 17vh;
  display: flex;
  gap: 1rem;
}

.stamp {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background: var(--charcoal-ink);
  color: var(--rice-paper);
  font-family: var(--jp);
  font-size: 1.3rem;
}

.panel-measure {
  background: linear-gradient(90deg, var(--ochre-plaster) 0 51%, var(--rice-paper) 51% 100%);
  color: var(--charcoal-ink);
}

.bauhaus-grid { position: absolute; inset: 0; }
.shape { position: absolute; }
.shape.circle {
  width: 28vw;
  aspect-ratio: 1;
  left: 8vw;
  top: 16vh;
  border-radius: 50%;
  background: var(--muted-indigo);
}
.shape.slab {
  width: 14vw;
  height: 70vh;
  left: 51vw;
  top: 12vh;
  background: var(--fired-clay);
}
.shape.semi {
  width: 30vw;
  height: 15vw;
  right: 8vw;
  bottom: 18vh;
  border-radius: 30vw 30vw 0 0;
  background: var(--raw-umber);
}

.measure-text {
  grid-column: 7 / span 5;
  align-self: center;
  z-index: 2;
}

.tatami-lines {
  position: absolute;
  left: 8vw;
  bottom: 10vh;
  width: 33vw;
  display: grid;
  gap: 1rem;
}
.tatami-lines i { height: 2px; background: rgba(37, 33, 27, .35); }

.panel-gather {
  background: var(--muted-indigo);
  color: var(--rice-paper);
}

.low-table {
  position: absolute;
  left: 12vw;
  bottom: 18vh;
  width: 56vw;
  height: 2.1rem;
  background: var(--raw-umber);
  box-shadow: 5vw 2.1rem 0 rgba(37,33,27,.55), 35vw 2.1rem 0 rgba(37,33,27,.55);
}

.pin-field span {
  position: absolute;
  width: 1.15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bell-brass);
  box-shadow: 0 0 0 .55rem rgba(212, 168, 79, .08);
}
.pin-field span:nth-child(1) { left: 18vw; top: 16vh; }
.pin-field span:nth-child(2) { left: 71vw; top: 23vh; background: var(--fired-clay); }
.pin-field span:nth-child(3) { left: 38vw; top: 40vh; }
.pin-field span:nth-child(4) { left: 82vw; top: 65vh; background: var(--rice-paper); }
.pin-field span:nth-child(5) { left: 12vw; top: 72vh; background: var(--fired-clay); }

.gather-copy {
  grid-column: 2 / span 5;
  align-self: center;
  z-index: 2;
}
.gather-copy h2, .panel-gather .chapter-number { color: var(--rice-paper); }
.gather-copy .chapter-number { text-shadow: .08em .08em 0 var(--fired-clay); }

.folded-tab {
  position: absolute;
  right: 13vw;
  bottom: 30vh;
  color: var(--charcoal-ink);
  background: var(--rice-paper);
  padding: 1.1rem 1.4rem;
  box-shadow: -1rem 1rem 0 rgba(169, 78, 50, .72);
}

.panel-remain {
  background:
    radial-gradient(circle at 50% 46%, rgba(201,154,73,.13), transparent 28rem),
    var(--charcoal-ink);
  color: var(--rice-paper);
}

.seal-field {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.seal {
  width: clamp(15rem, 28vw, 29rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: .9rem solid var(--bell-brass);
  background: rgba(169, 78, 50, .18);
  color: var(--rice-paper);
  box-shadow: inset 0 0 0 1px var(--rice-paper), 0 2rem 5rem rgba(0,0,0,.3);
}

.seal span {
  font-family: var(--display);
  font-size: clamp(4rem, 8vw, 8rem);
  letter-spacing: .08em;
  line-height: .8;
}

.seal small {
  font-family: var(--serif);
  color: var(--bell-brass);
  font-size: 1.2rem;
  margin-top: -6rem;
}

.remain-copy {
  grid-column: 2 / span 4;
  align-self: end;
  padding-bottom: 8vh;
  z-index: 2;
}
.remain-copy h2 { color: var(--rice-paper); }
.final-dots { position: absolute; right: 15vw; bottom: 16vh; }

.impression {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.impression.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .panel { grid-template-columns: repeat(6, 1fr); padding: 2rem; }
  .hero-word, .chapter-copy, .measure-text, .gather-copy, .remain-copy { grid-column: 1 / -1; }
  .bell-circle { left: 34vw; top: 11vh; }
  .clay-curtain { left: 0; width: 72vw; }
  .moss-plane { width: 45vw; right: -8vw; }
  .measure-text { align-self: end; padding-bottom: 12vh; }
  .shape.circle { width: 56vw; }
  .shape.slab { width: 24vw; left: 58vw; }
  .shape.semi { width: 52vw; height: 26vw; }
  .side-markers { right: .55rem; }
}