:root {
  --rice: #F7F1E3;
  --leaf: #8FAF7A;
  --ume: #E87A90;
  --rain: #A9BCC2;
  --ink: #24352B;
  --amber: #F3B45B;
  --stone: #6F7772;
  --paper-shadow: rgba(36, 53, 43, 0.13);
  --serif-jp: "Yu Mincho", "Hiragino Mincho ProN", "Shippori Mincho", "Noto Serif JP", Georgia, serif;
  --gothic-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Meiryo", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}

/* Design vocabulary retained for compliance: IBM Plex Mono sparingly for temperature; Rain Interlude / 15:47** — a diagonal band of translucent spring rain. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--gothic-jp);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.62), transparent 28%),
    linear-gradient(104deg, rgba(169,188,194,0.18), transparent 32%, rgba(143,175,122,0.10) 72%, rgba(243,180,91,0.12)),
    var(--rice);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.paper-grain,
.paper-grain::before,
.paper-grain::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.paper-grain {
  opacity: .58;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(88deg, rgba(36,53,43,.025) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(3deg, rgba(255,255,255,.22) 0 2px, transparent 2px 17px);
}

.paper-grain::before {
  content: "";
  background-image:
    radial-gradient(circle at 12% 24%, rgba(36,53,43,.045) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 55%, rgba(111,119,114,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 18%, rgba(232,122,144,.035) 0 1.5px, transparent 2.5px);
  background-size: 31px 43px, 47px 29px, 61px 53px;
}

.paper-grain::after {
  content: "";
  opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(36,53,43,.05), transparent 52%, rgba(36,53,43,.03), transparent);
}

.shoji-layer {
  position: fixed;
  top: -8vh;
  bottom: -8vh;
  width: 28vw;
  pointer-events: none;
  z-index: 3;
  opacity: .46;
  background:
    linear-gradient(90deg, rgba(247,241,227,.2), rgba(247,241,227,.88)),
    repeating-linear-gradient(0deg, transparent 0 72px, rgba(36,53,43,.11) 73px 75px),
    repeating-linear-gradient(90deg, transparent 0 82px, rgba(36,53,43,.10) 83px 85px);
  filter: blur(.15px);
  transition: transform 900ms ease-out, opacity 900ms ease-out;
}

.shoji-left { left: -9vw; transform: rotate(-1.4deg) translateX(var(--shoji-left, 0)); }
.shoji-right { right: -12vw; transform: rotate(1.9deg) translateX(var(--shoji-right, 0)); opacity: .36; }

.day-scroll {
  position: relative;
  width: min(76vw, 940px);
  margin-left: clamp(9vw, 14vw, 18vw);
  min-height: 500vh;
  background: rgba(247,241,227,.48);
  box-shadow: 0 0 70px rgba(36,53,43,.07), inset 0 0 0 1px rgba(36,53,43,.06);
}

.day-scroll::before,
.day-scroll::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(111,119,114,.32), transparent);
  z-index: 2;
}

.day-scroll::before { left: clamp(9vw, 14vw, 18vw); }
.day-scroll::after { left: calc(clamp(9vw, 14vw, 18vw) + min(76vw, 940px)); }

.scroll-rod {
  position: fixed;
  left: clamp(7vw, 12vw, 16vw);
  width: min(82vw, 1010px);
  height: 13px;
  border-radius: 99px;
  z-index: 4;
  background: linear-gradient(90deg, rgba(36,53,43,.65), rgba(111,119,114,.22), rgba(36,53,43,.56));
  box-shadow: 0 2px 16px rgba(36,53,43,.18);
}

.scroll-rod.top { top: 18px; }
.scroll-rod.bottom { bottom: 18px; }

.chapter {
  --accent: var(--ume);
  position: relative;
  min-height: 100vh;
  padding: clamp(70px, 10vw, 132px) clamp(36px, 7vw, 112px);
  display: grid;
  align-content: center;
  overflow: hidden;
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 1.8rem 2rem;
  border: 1px solid rgba(111,119,114,.13);
  border-left-color: rgba(232,122,144,.26);
  z-index: -1;
  transform: translateY(var(--panel-shift, 0));
  transition: transform 800ms ease, border-color 800ms ease;
}

.chapter::after {
  content: attr(data-season) " / " attr(data-time);
  position: absolute;
  right: 2.1rem;
  bottom: 2.4rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: rgba(111,119,114,.62);
  text-transform: uppercase;
}

.chapter-title {
  margin: 0;
  max-width: 600px;
  font-family: var(--serif-jp);
  font-size: clamp(3.6rem, 9vw, 8.8rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.055em;
  color: var(--ink);
  text-shadow: 0 16px 38px rgba(36,53,43,.08);
}

.chapter-copy {
  max-width: 360px;
  margin: 1.5rem 0 0 auto;
  color: var(--stone);
  font-size: clamp(.98rem, 1.35vw, 1.18rem);
  line-height: 1.9;
}

.haiku {
  font-family: var(--serif-jp);
  font-size: clamp(1.18rem, 2vw, 1.9rem);
  line-height: 1.9;
  color: rgba(36,53,43,.76);
  font-weight: 400;
}

.edge-note {
  position: absolute;
  top: 18vh;
  left: clamp(12px, 2.5vw, 35px);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  letter-spacing: .13em;
  color: var(--stone);
  font-size: .74rem;
  text-transform: uppercase;
}

.edge-note b { color: var(--ink); font-weight: 500; }

.chapter-mark {
  position: absolute;
  right: 16%;
  top: 17%;
  font-family: var(--serif-jp);
  font-size: 12rem;
  color: rgba(169,188,194,.18);
  line-height: 1;
}

.season-thermometer {
  position: fixed;
  z-index: 30;
  right: clamp(18px, 3vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 25px;
  justify-items: center;
}

.thermo-line {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(111,119,114,.25);
  z-index: -1;
}

.thermo-line span {
  display: block;
  width: 100%;
  height: var(--progress, 0%);
  background: linear-gradient(var(--rain), var(--leaf), var(--ume), var(--amber));
}

.season-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(36,53,43,.35);
  border-radius: 50%;
  background: rgba(247,241,227,.75);
  cursor: pointer;
  transition: transform 300ms ease, background 300ms ease, border-color 300ms ease;
}

.season-dot span {
  position: absolute;
  right: 22px;
  transform: translateY(-35%);
  opacity: 0;
  white-space: nowrap;
  font: .66rem var(--mono);
  letter-spacing: .12em;
  color: var(--stone);
  transition: opacity 300ms ease, right 300ms ease;
}

.season-dot.active,
.season-dot:hover {
  transform: scale(1.55);
  background: var(--ume);
  border-color: var(--ume);
}

.season-dot.active span,
.season-dot:hover span { opacity: 1; right: 28px; }

.dawn {
  background:
    linear-gradient(180deg, rgba(169,188,194,.28), transparent 42%),
    radial-gradient(ellipse at 46% 72%, rgba(169,188,194,.2), transparent 35%);
}

.mist-field span {
  position: absolute;
  left: -12%;
  width: 130%;
  height: 14vh;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(169,188,194,.34), rgba(247,241,227,.7), transparent);
  filter: blur(18px);
  animation: mistDrift 17s ease-in-out infinite alternate;
}
.mist-field span:nth-child(1) { bottom: 18%; animation-duration: 21s; }
.mist-field span:nth-child(2) { bottom: 27%; opacity: .55; animation-delay: -7s; }
.mist-field span:nth-child(3) { bottom: 10%; opacity: .35; animation-delay: -3s; }

.dawn-seal {
  position: absolute;
  left: 27%;
  top: 62%;
  padding: .55rem .68rem .62rem;
  border: 2px solid var(--ume);
  color: var(--ume);
  font-family: var(--serif-jp);
  font-size: 1.2rem;
  letter-spacing: .04em;
  transform: rotate(-3deg);
  background: rgba(247,241,227,.35);
  box-shadow: inset 0 0 0 1px rgba(232,122,144,.18);
  transition: transform 420ms ease, background 420ms ease;
}

.dawn-seal.pressed { transform: rotate(-3deg) scale(.94); background: rgba(232,122,144,.10); }

.opening-whisper {
  position: absolute;
  left: 38%;
  top: 72%;
  color: var(--stone);
  font-family: var(--serif-jp);
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-style: italic;
}

.dawn-haiku { width: 270px; margin: 0 0 0 auto; opacity: .78; }

.single-petal,
.cursor-petal,
.petal-note i {
  width: 18px;
  height: 29px;
  border-radius: 70% 18% 70% 20%;
  background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.75), transparent 22%), var(--ume);
  box-shadow: 0 8px 18px rgba(232,122,144,.18);
}

.journey-petal {
  position: absolute;
  left: 16%;
  top: 18%;
  opacity: .72;
  animation: petalFloat 16s cubic-bezier(.6,0,.32,1) infinite;
}

.specimen {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(143,175,122,.08) 48% 49%, transparent 49%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(111,119,114,.08) 119px 120px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(111,119,114,.07) 97px 98px);
}

.specimen-board {
  position: relative;
  min-height: 48vh;
  margin-top: 3rem;
}

.petal-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--serif-jp);
  color: rgba(36,53,43,.72);
  transform: rotate(var(--r));
}
.petal-note::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -16px;
  width: 1px;
  height: 46px;
  background: rgba(36,53,43,.22);
}
.petal-note span { border-bottom: 1px solid rgba(111,119,114,.22); padding-bottom: .2rem; }
.p1 { --r: -7deg; left: 12%; top: 4%; }
.p2 { --r: 5deg; left: 56%; top: 20%; }
.p3 { --r: -2deg; left: 34%; top: 52%; }
.p4 { --r: 8deg; left: 66%; top: 72%; }

.botanical-line {
  position: absolute;
  right: 6%;
  top: 14%;
  width: min(42vw, 420px);
  height: 70vh;
  opacity: .44;
}
.botanical-line path {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: drawStem 5s ease forwards;
}

.noon {
  background:
    radial-gradient(circle at 75% 28%, rgba(143,175,122,.2), transparent 32%),
    linear-gradient(125deg, rgba(143,175,122,.24), rgba(247,241,227,.34) 46%, rgba(169,188,194,.12));
}
.leaf-shadow {
  position: absolute;
  width: 105vw;
  height: 24vh;
  left: -12vw;
  top: 28%;
  opacity: .28;
  transform-origin: 20% 50%;
  filter: blur(5px);
  background: radial-gradient(ellipse at 20% 50%, var(--ink) 0 5%, transparent 5.3%), radial-gradient(ellipse at 35% 50%, var(--ink) 0 7%, transparent 7.3%), radial-gradient(ellipse at 52% 50%, var(--ink) 0 6%, transparent 6.3%), linear-gradient(90deg, transparent, var(--ink), transparent);
  animation: sundial 24s ease-in-out infinite alternate;
}
.shadow-b { top: 55%; opacity: .18; animation-duration: 31s; transform: rotate(-12deg); }
.vertical-title { writing-mode: vertical-rl; justify-self: end; letter-spacing: .02em; }
.sundial-note { position: absolute; left: 16%; top: 24%; font: .75rem var(--mono); color: var(--stone); letter-spacing: .12em; }
.noon-haiku { width: 310px; margin: 8vh 0 0 14%; }
.dew-cluster span {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(169,188,194,.34) 48%, rgba(143,175,122,.16));
  box-shadow: 0 0 18px rgba(169,188,194,.42);
  animation: dewPulse 4s ease-in-out infinite;
}
.dew-cluster span:nth-child(1) { left: 68%; top: 18%; }
.dew-cluster span:nth-child(2) { left: 76%; top: 49%; animation-delay: -1s; }
.dew-cluster span:nth-child(3) { left: 48%; top: 73%; animation-delay: -2s; }
.dew-cluster span:nth-child(4) { left: 26%; top: 38%; animation-delay: -3s; }

.rain {
  background:
    linear-gradient(135deg, transparent 0 26%, rgba(169,188,194,.34) 26% 47%, transparent 47%),
    linear-gradient(180deg, rgba(247,241,227,.7), rgba(169,188,194,.15));
}
.rain-veil {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(108deg, transparent 0 16px, rgba(169,188,194,.36) 17px 19px, transparent 20px 34px);
  transform: translateX(-12%);
  animation: rainSlide 3.8s linear infinite;
}
.rain-copy { margin-left: 12%; margin-right: 0; }
.rain-reveal {
  position: relative;
  width: min(520px, 72%);
  margin: 8vh 0 0 22%;
  padding: 2rem;
  font-family: var(--serif-jp);
  font-size: clamp(1.3rem, 2.7vw, 2.4rem);
  line-height: 1.8;
  color: transparent;
  background: radial-gradient(circle at var(--reveal-x, 50%) var(--reveal-y, 50%), var(--ink) 0 12%, rgba(36,53,43,.62) 22%, transparent 36%);
  -webkit-background-clip: text;
  background-clip: text;
  border-left: 1px solid rgba(169,188,194,.55);
}
.rain-reveal span { display: block; }
.ripples i {
  position: absolute;
  border: 1px solid rgba(169,188,194,.48);
  border-radius: 50%;
  width: 80px;
  height: 28px;
  animation: ripple 4.7s ease-out infinite;
}
.ripples i:nth-child(1) { left: 20%; bottom: 17%; }
.ripples i:nth-child(2) { left: 56%; bottom: 28%; animation-delay: -1.6s; }
.ripples i:nth-child(3) { left: 75%; bottom: 13%; animation-delay: -3s; }

.lantern {
  background:
    radial-gradient(circle at 68% 38%, rgba(243,180,91,.42), transparent 20%),
    radial-gradient(circle at 24% 72%, rgba(232,122,144,.16), transparent 21%),
    linear-gradient(180deg, rgba(169,188,194,.1), rgba(243,180,91,.25));
}
.lantern-halos span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,180,91,.72), rgba(243,180,91,.18) 42%, transparent 67%);
  filter: blur(.6px);
  animation: lanternBreathe 6s ease-in-out infinite;
}
.lantern-halos span:nth-child(1) { width: 220px; height: 220px; right: 12%; top: 18%; }
.lantern-halos span:nth-child(2) { width: 140px; height: 140px; left: 22%; bottom: 18%; animation-delay: -2s; }
.lantern-halos span:nth-child(3) { width: 86px; height: 86px; right: 42%; bottom: 28%; animation-delay: -4s; }
.moths i {
  position: absolute;
  width: 18px;
  height: 9px;
  background: rgba(36,53,43,.42);
  border-radius: 50% 50% 8px 8px;
  transform: rotate(var(--moth-r));
  animation: moth 8s ease-in-out infinite;
}
.moths i:nth-child(1) { --moth-r: 24deg; right: 30%; top: 34%; }
.moths i:nth-child(2) { --moth-r: -18deg; right: 16%; top: 56%; animation-delay: -2s; }
.moths i:nth-child(3) { --moth-r: 7deg; left: 34%; top: 48%; animation-delay: -4s; }
.dusk-haiku { margin-top: 2rem; max-width: 440px; }
.calendar-stamp {
  position: absolute;
  right: 10%;
  bottom: 15%;
  display: grid;
  gap: .45rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(232,122,144,.45);
  color: var(--ume);
  transform: rotate(2deg);
  background: rgba(247,241,227,.28);
}
.calendar-stamp strong { font-family: var(--serif-jp); font-size: 1.45rem; font-weight: 400; }
.calendar-stamp span { font: .65rem var(--mono); letter-spacing: .12em; color: var(--stone); }

.cursor-petal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .72;
  transform: translate3d(-100px,-100px,0) rotate(0deg);
  transition: opacity 400ms ease;
}

@keyframes mistDrift { from { transform: translateX(-6%) scaleX(.92); } to { transform: translateX(7%) scaleX(1.08); } }
@keyframes petalFloat { 0% { transform: translate(0,0) rotate(0deg); } 35% { transform: translate(42vw, 18vh) rotate(94deg); } 68% { transform: translate(18vw, 54vh) rotate(178deg); } 100% { transform: translate(54vw, 73vh) rotate(270deg); } }
@keyframes drawStem { to { stroke-dashoffset: 0; } }
@keyframes sundial { from { transform: rotate(-16deg) translateX(-3%); } to { transform: rotate(12deg) translateX(5%); } }
@keyframes dewPulse { 50% { transform: scale(1.28); opacity: .62; } }
@keyframes rainSlide { to { transform: translateX(12%) translateY(7%); } }
@keyframes ripple { 0% { transform: scale(.2); opacity: .75; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes lanternBreathe { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes moth { 50% { transform: translate(18px, -22px) rotate(calc(var(--moth-r) + 20deg)); opacity: .65; } }

@media (max-width: 760px) {
  .day-scroll { width: 100%; margin-left: 0; }
  .day-scroll::before, .day-scroll::after, .scroll-rod { display: none; }
  .chapter { padding: 74px 28px; }
  .chapter::before { inset: 1rem; }
  .season-thermometer { right: 12px; }
  .edge-note { left: 11px; top: 12vh; }
  .dawn-seal { left: 22%; }
  .chapter-copy, .rain-copy { margin-left: 18%; margin-right: 0; }
  .specimen-board { min-height: 55vh; }
  .botanical-line { right: -12%; width: 80vw; opacity: .27; }
  .vertical-title { writing-mode: horizontal-tb; justify-self: start; }
  .rain-reveal { margin-left: 10%; width: 86%; }
}