:root {
  --rice-paper: #F7F0DE;
  --young-mugwort: #8FAF7A;
  --pale-sage: #DDE8D6;
  --rain-slate: #52636A;
  --ume-petal: #E9A7B4;
  --ink-root: #20231F;
  --wet-stone: #B9C2B3;
  --lantern-amber: #D99B48;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --gothic: "Zen Kaku Gothic New", Inter, "Hiragino Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--rain-slate);
  background: var(--rice-paper);
  font-family: var(--gothic);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .48;
  background:
    radial-gradient(circle at 18% 22%, rgba(32,35,31,.055) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 71%, rgba(82,99,106,.05) 0 1px, transparent 1.8px),
    repeating-linear-gradient(91deg, rgba(255,255,255,.16) 0 2px, rgba(32,35,31,.018) 2px 3px, transparent 3px 12px);
  mix-blend-mode: multiply;
}

.workshop-scroll {
  width: 100%;
}

.room {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(247,240,222,.98), rgba(221,232,214,.52)),
    var(--rice-paper);
}

.room::before {
  content: "";
  position: absolute;
  inset: 8vh 9vw;
  border-left: 1px solid rgba(82,99,106,.18);
  border-right: 1px solid rgba(185,194,179,.24);
  background-image:
    linear-gradient(90deg, transparent 0 calc(8.333% - .5px), rgba(82,99,106,.055) calc(8.333% - .5px) calc(8.333% + .5px), transparent calc(8.333% + .5px)),
    linear-gradient(0deg, transparent 0 calc(33.33% - .5px), rgba(185,194,179,.12) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px));
  background-size: 8.333% 100%, 100% 33.333%;
  opacity: .55;
  z-index: -1;
}

.room-panel {
  position: relative;
  width: min(86vw, 1380px);
  min-height: 76vh;
  border: 1px solid rgba(82,99,106,.16);
  box-shadow: 0 28px 80px rgba(82,99,106,.12);
  background: rgba(247,240,222,.7);
}

.chapter-copy {
  position: absolute;
  z-index: 3;
  width: min(410px, 70vw);
  padding: clamp(28px, 4vw, 54px);
  background: rgba(247,240,222,.62);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(185,194,179,.45);
}

.left-alcove { left: 6vw; top: 12vh; }
.right-alcove { right: 6vw; top: 15vh; }

.mono-label {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--young-mugwort);
}

h1,
h2 {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 400;
  color: var(--ink-root);
  letter-spacing: -.04em;
}

h1 {
  font-size: clamp(64px, 13vw, 196px);
  line-height: .82;
}

h2 {
  font-size: clamp(42px, 6vw, 94px);
  line-height: .92;
}

.chapter-copy p:not(.mono-label) {
  margin: 24px 0 0;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.85;
}

.season-marker {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-end;
}

.season-marker a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(82,99,106,.52);
  transition: color .45s ease, transform .45s ease;
}

.season-marker a span {
  width: 24px;
  height: 1px;
  background: var(--wet-stone);
  transition: width .45s ease, background .45s ease;
}

.season-marker a.active {
  color: var(--ink-root);
  transform: translateX(-8px);
}

.season-marker a.active span {
  width: 46px;
  background: var(--young-mugwort);
}

.sprout-guide {
  position: fixed;
  left: 8vw;
  top: 88vh;
  width: 28px;
  height: 50px;
  z-index: 28;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), transform .9s ease;
}

.sprout-stem {
  position: absolute;
  left: 13px;
  bottom: 0;
  width: 2px;
  height: 38px;
  background: var(--young-mugwort);
  border-radius: 4px;
  transform-origin: bottom;
}

.sprout-leaf {
  position: absolute;
  bottom: 18px;
  width: 20px;
  height: 12px;
  background: var(--young-mugwort);
  border-radius: 90% 0 90% 0;
}

.sprout-leaf.left { left: 0; transform: rotate(-28deg); }
.sprout-leaf.right { right: 0; transform: scaleX(-1) rotate(-28deg); }

.frost-room {
  background: radial-gradient(circle at 50% 88%, rgba(143,175,122,.16), transparent 12%), linear-gradient(180deg, #F7F0DE 0%, #F7F0DE 72%, #DDE8D6 100%);
}

.shoji-screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 1;
}

.paper-door {
  position: relative;
  background:
    linear-gradient(90deg, rgba(82,99,106,.11) 1px, transparent 1px),
    linear-gradient(0deg, rgba(82,99,106,.08) 1px, transparent 1px),
    rgba(247,240,222,.62);
  background-size: 12vw 100%, 100% 18vh, auto;
  transition: transform 1.2s cubic-bezier(.23,1,.32,1);
}

.left-door { transform-origin: left center; }
.right-door { transform-origin: right center; }
.frost-room.open .left-door { transform: translateX(-8vw) skewY(-1deg); }
.frost-room.open .right-door { transform: translateX(8vw) skewY(1deg); }

.green-crack {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 11vh;
  background: var(--young-mugwort);
  border-radius: 999px 999px 0 0;
  z-index: 4;
  box-shadow: 0 0 28px rgba(143,175,122,.36);
  transform: translateX(-50%) scaleY(.18);
  transform-origin: bottom;
  transition: transform 1s ease, width 1s ease;
}

.frost-room.open .green-crack {
  width: 5px;
  transform: translateX(-50%) scaleY(1);
}

.gate-title {
  position: relative;
  z-index: 5;
  width: min(86vw, 1180px);
  transform: translateY(5vh);
  transition: transform 1.1s cubic-bezier(.23,1,.32,1);
}

.frost-room.open .gate-title { transform: translateY(-4vh); }

.haiku {
  margin: 28px 0 0 8vw;
  max-width: 430px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.7;
}

.studio-note {
  margin: 18px 0 0 8vw;
  max-width: 470px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(82,99,106,.58);
}

.ink-path {
  position: absolute;
  fill: none;
  stroke: var(--rain-slate);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .5;
}

.ink-path path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.8s ease .2s;
}

.room.active .ink-path path,
.frost-room.open .ink-path path {
  stroke-dashoffset: 0;
}

.gate-path { left: 8vw; bottom: 12vh; width: 64vw; z-index: 2; }
.table-path { left: 20vw; bottom: 13vh; width: 58vw; }

.drafting-sheet {
  background:
    linear-gradient(90deg, rgba(82,99,106,.13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(82,99,106,.1) 1px, transparent 1px),
    rgba(247,240,222,.82);
  background-size: 72px 72px;
}

.bamboo-ruler {
  position: absolute;
  left: 20vw;
  top: 11vh;
  width: 44vw;
  height: 42px;
  background: linear-gradient(90deg, rgba(217,155,72,.38), rgba(247,240,222,.38));
  border: 1px solid rgba(217,155,72,.5);
  display: flex;
  justify-content: space-around;
  align-items: end;
  padding-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--rain-slate);
  transform: rotate(-2deg);
}

.bamboo-ruler::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(32,35,31,.22) 13px 14px);
}

.vellum-note {
  position: absolute;
  padding: 24px 30px;
  background: rgba(221,232,214,.5);
  border: 1px solid rgba(143,175,122,.38);
  font-family: var(--mincho);
  font-size: 27px;
  color: var(--ink-root);
  box-shadow: 0 12px 30px rgba(82,99,106,.1);
}

.note-one { right: 12vw; bottom: 16vh; transform: rotate(3deg); }
.note-two { left: 43vw; top: 27vh; transform: rotate(-4deg); color: var(--rain-slate); }

.tray-surface {
  background: linear-gradient(130deg, rgba(221,232,214,.76), rgba(247,240,222,.7));
}

.seed-packet {
  position: absolute;
  left: 10vw;
  bottom: 14vh;
  width: 220px;
  height: 280px;
  padding: 34px 24px;
  border: 1px solid rgba(82,99,106,.32);
  background: #F7F0DE;
  font-family: var(--mincho);
  font-size: 32px;
  color: var(--ink-root);
  transform: rotate(-7deg);
}

.seed-packet small {
  display: block;
  margin-top: 70px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--young-mugwort);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.seed-packet::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ume-petal);
  border-radius: 50%;
}

.seed-tray {
  position: absolute;
  left: 31vw;
  bottom: 13vh;
  width: min(620px, 50vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px;
  background: rgba(82,99,106,.12);
  border: 1px solid rgba(82,99,106,.26);
}

.seed-tray span {
  position: relative;
  height: 96px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 60%, rgba(32,35,31,.4), rgba(82,99,106,.18) 34%, rgba(247,240,222,.28) 35%);
  overflow: hidden;
}

.seed-tray span::before,
.seed-tray span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 32px;
  background: var(--young-mugwort);
  transform-origin: bottom;
  opacity: 0;
  transition: opacity .7s ease, transform .9s ease;
}

.seed-tray span::before {
  width: 2px;
  height: 28px;
  transform: scaleY(.1);
}

.seed-tray span::after {
  width: 18px;
  height: 10px;
  border-radius: 90% 0 90% 0;
  transform: translateY(4px) rotate(-35deg) scale(.2);
}

.seed-room.active .seed-tray span::before,
.seed-room.active .seed-tray span::after {
  opacity: 1;
  transform: none;
}

.seed-room.active .seed-tray span::after { transform: rotate(-35deg) scale(1); }

.wood-bench {
  background:
    repeating-linear-gradient(96deg, rgba(217,155,72,.12) 0 3px, transparent 3px 21px),
    linear-gradient(135deg, rgba(247,240,222,.72), rgba(217,155,72,.18));
}

.joinery-diagram {
  position: absolute;
  right: 12vw;
  top: 21vh;
  width: 430px;
  height: 340px;
}

.beam {
  position: absolute;
  background: rgba(217,155,72,.48);
  border: 1px solid rgba(32,35,31,.25);
}

.beam-a { width: 380px; height: 72px; left: 0; top: 136px; }
.beam-b { width: 74px; height: 300px; left: 160px; top: 20px; }

.joinery-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 49%, rgba(82,99,106,.45) 49.5% 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(82,99,106,.32) 49.5% 50.5%, transparent 51%);
  opacity: .65;
}

.tea-cup {
  position: absolute;
  right: 9vw;
  bottom: 14vh;
  width: 96px;
  height: 70px;
  border-radius: 0 0 42px 42px;
  border: 2px solid rgba(82,99,106,.38);
  background: rgba(247,240,222,.65);
}

.tea-cup span {
  position: absolute;
  inset: 13px 16px auto;
  height: 16px;
  border-radius: 50%;
  background: rgba(143,175,122,.28);
}

.stone-courtyard {
  background: linear-gradient(145deg, rgba(185,194,179,.68), rgba(221,232,214,.46));
}

.water-basin {
  position: absolute;
  left: 14vw;
  top: 23vh;
  width: min(520px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(82,99,106,.32);
  background: radial-gradient(circle, rgba(247,240,222,.28), rgba(82,99,106,.11) 62%, rgba(32,35,31,.08));
}

.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(82,99,106,.42);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ripple 4s infinite;
}

.r2 { animation-delay: 1.2s; }
.r3 { animation-delay: 2.4s; }

@keyframes ripple {
  0% { opacity: .65; transform: translate(-50%, -50%) scale(.2); }
  80% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

.rain-marks i {
  position: absolute;
  width: 1px;
  height: 90px;
  background: rgba(82,99,106,.23);
  transform: rotate(12deg);
}

.rain-marks i:nth-child(1) { left: 55%; top: 12%; }
.rain-marks i:nth-child(2) { left: 60%; top: 25%; height: 54px; }
.rain-marks i:nth-child(3) { left: 72%; top: 14%; height: 76px; }
.rain-marks i:nth-child(4) { left: 79%; top: 38%; height: 62px; }
.rain-marks i:nth-child(5) { left: 42%; top: 18%; height: 50px; }

.lantern-table {
  background: radial-gradient(circle at 64% 35%, rgba(217,155,72,.32), transparent 28%), linear-gradient(140deg, rgba(32,35,31,.92), rgba(82,99,106,.82));
  border-color: rgba(247,240,222,.2);
}

.warm-copy {
  background: rgba(247,240,222,.82);
  border-color: rgba(217,155,72,.46);
}

.paper-lantern {
  position: absolute;
  right: 17vw;
  top: 12vh;
  width: 180px;
  height: 270px;
  border-radius: 48%;
  background: radial-gradient(circle, rgba(247,240,222,.9), rgba(217,155,72,.58));
  box-shadow: 0 0 120px rgba(217,155,72,.55);
  animation: lanternBreath 4.8s ease-in-out infinite;
}

.paper-lantern::before,
.paper-lantern::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: rgba(82,99,106,.28);
}

.paper-lantern::before { top: 32%; box-shadow: 0 52px rgba(82,99,106,.22), 0 104px rgba(82,99,106,.2); }
.paper-lantern::after { top: 0; bottom: 0; width: 1px; height: auto; left: 50%; right: auto; }

@keyframes lanternBreath {
  50% { box-shadow: 0 0 150px rgba(217,155,72,.75); transform: translateY(-6px); }
}

.review-slips {
  position: absolute;
  right: 28vw;
  bottom: 15vh;
  display: grid;
  gap: 14px;
}

.review-slips p {
  margin: 0;
  padding: 13px 20px;
  background: rgba(247,240,222,.75);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(var(--tilt, -2deg));
}

.review-slips p:nth-child(2) { --tilt: 3deg; }
.review-slips p:nth-child(3) { --tilt: -5deg; }

.archive-cabinet {
  background: linear-gradient(135deg, rgba(247,240,222,.9), rgba(233,167,180,.18) 52%, rgba(221,232,214,.65));
}

.archive-copy {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.stamped-note {
  display: inline-block;
  margin-top: 30px;
  padding: 16px 28px;
  border: 1px solid var(--ume-petal);
  color: var(--ink-root);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background: rgba(247,240,222,.8);
  transition: background .4s ease, transform .4s ease;
}

.stamped-note:hover {
  background: rgba(233,167,180,.28);
  transform: rotate(1deg) translateY(-3px);
}

.archive-drawers {
  position: absolute;
  left: 8vw;
  bottom: 12vh;
  width: 300px;
  display: grid;
  gap: 10px;
}

.archive-drawers div {
  height: 64px;
  border: 1px solid rgba(82,99,106,.24);
  background: rgba(247,240,222,.62);
  padding: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.falling-petal {
  position: absolute;
  width: 34px;
  height: 22px;
  border-radius: 90% 0 90% 0;
  background: var(--ume-petal);
  opacity: .72;
  animation: petalDrift 7s ease-in-out infinite;
}

.p1 { right: 15vw; top: 18vh; }
.p2 { right: 25vw; top: 36vh; animation-delay: 1.7s; transform: scale(.72); }
.p3 { right: 11vw; bottom: 20vh; animation-delay: 3.1s; transform: scale(.55); }

@keyframes petalDrift {
  50% { transform: translate(-28px, 44px) rotate(42deg); opacity: .45; }
}

.room-panel,
.chapter-copy,
.seed-packet,
.vellum-note {
  clip-path: polygon(0 1%, 98% 0, 100% 99%, 2% 100%);
}

@media (max-width: 860px) {
  .season-marker {
    right: 12px;
  }
  .season-marker a {
    font-size: 0;
  }
  .chapter-copy,
  .left-alcove,
  .right-alcove,
  .archive-copy {
    left: 7vw;
    right: auto;
    top: 10vh;
    width: 76vw;
    transform: none;
    text-align: left;
  }
  .room-panel {
    width: 92vw;
    min-height: 82vh;
  }
  .seed-tray,
  .joinery-diagram,
  .water-basin,
  .paper-lantern,
  .review-slips,
  .seed-packet,
  .bamboo-ruler,
  .archive-drawers {
    transform: scale(.72);
    transform-origin: bottom left;
  }
  .seed-tray { left: 8vw; bottom: 8vh; width: 82vw; }
  .joinery-diagram { left: 10vw; right: auto; bottom: 8vh; top: auto; }
  .water-basin { left: 8vw; top: 45vh; width: 72vw; }
  .paper-lantern { right: 11vw; top: 48vh; }
}