:root {
  --charcoal-night: #1f2937;
  --cottage-mist: #f3f4f6;
  --slate-ink: #374151;
  --annotation-gray: #6b7280;
  --pearl-fog: #e5e7eb;
  --steel-spine: #9ca3af;
  --spear-gold: #d4a574;
  --hedge-sage: #6b8f71;
  --frost-blue: #bfdbfe;
  --cool-silver: #cbd5e1;
  --warm-cream: #fef3c7;
  --spine-glow: #d1d5db;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  font-family: "Nunito Sans", "Inter", sans-serif;
  background: var(--charcoal-night);
  color: var(--slate-ink);
}

.scroll-book {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  scroll-snap-align: start;
  isolation: isolate;
}

.page {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 6rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-left {
  background: radial-gradient(circle at 20% 18%, rgba(255,255,255,0.8), transparent 32%), linear-gradient(135deg, var(--cottage-mist), #e5e7eb 72%);
  color: var(--slate-ink);
}

.page-right {
  justify-content: flex-end;
  text-align: right;
  background: radial-gradient(circle at 80% 16%, rgba(203,213,225,0.16), transparent 34%), linear-gradient(135deg, #111827, var(--charcoal-night) 70%);
  color: var(--pearl-fog);
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(107,143,113,0.12) 1px, transparent 1px), radial-gradient(rgba(203,213,225,0.18) 1px, transparent 1px);
  background-size: 39px 39px, 77px 77px;
  opacity: 0.36;
}

.page-left::after, .page-right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.page-left::after { background: linear-gradient(90deg, rgba(243,244,246,0.72), rgba(243,244,246,0.2)); }
.page-right::after { background: linear-gradient(270deg, rgba(31,41,55,0.68), rgba(31,41,55,0.16)); }

.gutter {
  position: relative;
  z-index: 25;
  background: var(--steel-spine);
  box-shadow: -3px 0 rgba(156,163,175,0.15), 3px 0 rgba(156,163,175,0.15);
  transition: background-color 420ms ease, box-shadow 420ms ease;
}

.gutter span { position: sticky; top: 0; display: block; height: 100vh; }
.spread.is-current .gutter { background: var(--frost-blue); box-shadow: -4px 0 rgba(191,219,254,0.26), 4px 0 rgba(191,219,254,0.26); }

.copy-block, .cover-word, .cover-note, .kanji-mark, .day-mark, .resolution-copy, .emblem { position: relative; z-index: 10; }

.copy-block { max-width: 34rem; }

.spread-title, .cover-word, .opposite-title {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
}

.spread-title { font-size: clamp(2.5rem, 6vw, 5rem); }
.opposite-title { font-size: clamp(2.3rem, 5.5vw, 4.6rem); color: var(--pearl-fog); }
.cover-word { font-size: clamp(5.4rem, 18vw, 18rem); color: rgba(55,65,81,0.9); }
.cover-right .cover-word { color: rgba(229,231,235,0.92); }

.day-mark {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  font-family: "Nunito", sans-serif;
  font-size: clamp(2.2rem, 6vw, 6rem);
  font-weight: 800;
  color: var(--spear-gold);
  text-shadow: 0 20px 50px rgba(31,41,55,0.28);
  z-index: 30;
}

.kanji-mark {
  position: absolute;
  left: 50%;
  bottom: 13vh;
  transform: translateX(-50%);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.7rem, 4vw, 3.8rem);
  color: var(--steel-spine);
  letter-spacing: 0.28em;
  z-index: 30;
}

.cover-note, .folio, .prose { font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 1.8; }
.cover-note { position: absolute; bottom: 12vh; max-width: 18rem; color: var(--slate-ink); font-style: italic; }
.cover-right .cover-note { color: var(--pearl-fog); right: clamp(2rem, 5vw, 6rem); }
.folio { margin: 0 0 1.2rem; color: var(--steel-spine); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; }
.japanese { font-family: "Zen Maru Gothic", sans-serif; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: none; }
.prose { margin: 1.35rem 0 0; max-width: 30rem; }
.emphasis { font-style: italic; font-weight: 600; color: var(--warm-cream); }
.notation { font-family: "Inconsolata", monospace; color: var(--annotation-gray); letter-spacing: 0.05em; font-size: 0.875rem; margin-top: 2rem; }

.garden-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(107,143,113,0.28), transparent 30%), radial-gradient(ellipse at 62% 26%, rgba(191,219,254,0.35), transparent 36%), linear-gradient(145deg, #f3f4f6, #cbd5e1);
}
.garden-atmosphere.inverted { filter: invert(0.92) saturate(0.35); opacity: 0.72; }

.float-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  bottom: -14vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(203,213,225,0.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 24%), rgba(191,219,254,var(--alpha));
  box-shadow: inset -10px -10px 24px rgba(55,65,81,0.08), 0 0 18px rgba(191,219,254,0.08);
  animation: bubble-rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes bubble-rise {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(var(--drift)); opacity: 0; }
}

.botanical { position: absolute; z-index: 5; opacity: 0.38; pointer-events: none; }
.botanical::before, .botanical::after {
  content: "";
  position: absolute;
  border: 1.5px solid var(--hedge-sage);
  border-left: 0;
  border-bottom: 0;
  border-radius: 50% 50% 0 50%;
  transform: rotate(35deg);
}
.botanical-left { left: 2vw; bottom: 4vh; width: 18rem; height: 24rem; border-left: 2px solid rgba(107,143,113,0.5); border-radius: 60% 0 0 0; }
.botanical-right { right: 2vw; top: 9vh; width: 16rem; height: 22rem; border-right: 2px solid rgba(107,143,113,0.45); border-radius: 0 60% 0 0; }
.botanical::before { width: 3.4rem; height: 1.8rem; top: 28%; left: 28%; }
.botanical::after { width: 2.8rem; height: 1.5rem; top: 54%; left: 55%; transform: rotate(-20deg); }
.dense { opacity: 0.5; transform: scale(1.2); }
.climbing { height: 34rem; opacity: 0.52; }

.watermark { position: absolute; z-index: 3; opacity: 0.12; pointer-events: none; }
.spear-mark { width: 0; height: 16rem; border-left: 8px solid var(--steel-spine); left: 58%; top: 18%; transform: rotate(-32deg); }
.spear-mark::before { content: ""; position: absolute; top: -3rem; left: -2rem; border-left: 2rem solid transparent; border-right: 2rem solid transparent; border-bottom: 3.4rem solid var(--steel-spine); }
.shield-mark { width: 13rem; height: 17rem; right: 18%; bottom: 12%; border: 12px solid var(--steel-spine); border-radius: 45% 45% 52% 52%; transform: rotate(24deg); }
.tilted { left: 16%; right: auto; transform: rotate(-18deg); }
.reverse { right: 30%; left: auto; transform: rotate(34deg); }
.low { bottom: 4%; opacity: 0.16; }

.resolution-spread { display: block; background: linear-gradient(90deg, var(--cottage-mist) 0%, var(--spine-glow) 50%, var(--charcoal-night) 100%); }
.resolution-field { min-height: 100vh; position: relative; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: clamp(2rem, 5vw, 6rem); overflow: hidden; }
.resolution-field::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(254,243,199,0.18), transparent 28%), radial-gradient(circle at 50% 50%, rgba(191,219,254,0.16), transparent 45%); }
.resolution-copy { max-width: 36rem; color: var(--slate-ink); }
.emblem { width: clamp(16rem, 30vw, 29rem); aspect-ratio: 1; display: grid; place-items: center; }
.emblem-shield { width: 70%; height: 82%; border: 4px solid rgba(156,163,175,0.55); border-radius: 45% 45% 52% 52%; position: relative; background: rgba(203,213,225,0.12); box-shadow: inset 0 0 60px rgba(191,219,254,0.16); }
.emblem-spear { position: absolute; left: 50%; top: 12%; width: 6px; height: 76%; background: rgba(156,163,175,0.75); transform: translateX(-50%); }
.emblem-spear::before { content: ""; position: absolute; top: -2.8rem; left: 50%; transform: translateX(-50%); border-left: 1.6rem solid transparent; border-right: 1.6rem solid transparent; border-bottom: 3rem solid rgba(156,163,175,0.75); }

.reveal, .title-characters .char { opacity: 0; filter: blur(4px); transform: scale(1.15); transition: opacity 800ms ease-out, filter 800ms ease-out, transform 800ms ease-out; }
.reveal.in-view, .in-view .char { opacity: 1; filter: blur(0); transform: scale(1); }
.title-characters .char { display: inline-block; transition-delay: calc(var(--i) * 50ms); }
.kanji-mark.reveal { filter: blur(8px); transition-duration: 1200ms; }

@media (max-width: 767px) {
  html, body { overflow: hidden; }
  .spread { grid-template-columns: 1fr; grid-template-rows: minmax(50vh, auto) 4px minmax(50vh, auto); }
  .page { min-height: 50vh; padding: 2rem; }
  .page-right { text-align: left; justify-content: flex-start; }
  .gutter { min-height: 4px; box-shadow: 0 -3px rgba(156,163,175,0.15), 0 3px rgba(156,163,175,0.15); }
  .gutter span { height: 4px; }
  .cover-word { font-size: clamp(4.4rem, 27vw, 8rem); }
  .day-mark { top: 50%; }
  .kanji-mark { bottom: 46%; }
  .cover-note, .cover-right .cover-note { position: relative; bottom: auto; right: auto; margin-top: 1rem; }
  .resolution-field { grid-template-columns: 1fr; gap: 2rem; }
  .bubble:nth-child(n+9) { display: none; }
}