:root {
  --mist-vellum: #F4F1E8;
  --second-sky: #BFDCE8;
  --dew-green: #8FBFA8;
  --ink-slate: #2F3B43;
  --first-sun: #F7DCA4;
  --bruised-horizon: #8E7C93;
  --waterline: #5E8FA3;
  --display: "Cormorant Garamond", serif;
  --small: "Alegreya Sans SC", sans-serif;
  --body: "Literata", serif;
  --hand: "Gochi Hand", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-slate);
  background:
    radial-gradient(circle at 74% 8%, rgba(247, 220, 164, 0.48), transparent 22rem),
    radial-gradient(circle at 12% 38%, rgba(191, 220, 232, 0.58), transparent 34rem),
    linear-gradient(115deg, #F4F1E8 0%, #F4F1E8 48%, rgba(191, 220, 232, 0.44) 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

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

.paper-grain {
  opacity: .46;
  background-image:
    repeating-linear-gradient(17deg, rgba(47, 59, 67, .025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(104deg, rgba(142, 124, 147, .022) 0 1px, transparent 1px 11px);
  mix-blend-mode: multiply;
}

.dawn-wash {
  background: linear-gradient(180deg, rgba(244, 241, 232, .15), rgba(191, 220, 232, .2) 54%, rgba(244, 241, 232, .55));
}

.archive { position: relative; z-index: 1; }

.phase-strip {
  position: fixed;
  z-index: 8;
  top: 50%;
  left: 1.4rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.phase {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(94, 143, 163, .38);
  border-radius: 999px;
  background: rgba(244, 241, 232, .52);
  position: relative;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(47, 59, 67, .08), inset 0 0 16px rgba(191, 220, 232, .4);
  transition: transform .45s ease, background .45s ease, border-color .45s ease;
}

.phase span {
  position: absolute;
  inset: .62rem;
  border-radius: inherit;
  background: var(--second-sky);
  transform: scale(.54);
  transition: transform .45s ease, background .45s ease;
}

.phase::after {
  content: attr(data-phase);
  position: absolute;
  left: 2.9rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 500 .72rem var(--small);
  letter-spacing: .12em;
  color: var(--waterline);
  opacity: 0;
  transition: opacity .35s ease;
}

.phase:hover::after,
.phase.is-active::after { opacity: .86; }

.phase.is-active {
  transform: scale(1.12);
  background: rgba(247, 220, 164, .28);
  border-color: rgba(94, 143, 163, .72);
}

.phase.is-active span { transform: scale(1); background: var(--dew-green); }

.plate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(5.5rem, 12vw) 1fr;
  align-items: center;
  padding: 7vh 6vw 7vh 0;
  position: relative;
}

.plate::before {
  content: attr(data-title);
  position: absolute;
  right: 5vw;
  top: 4vh;
  font: 500 .78rem var(--small);
  letter-spacing: .24em;
  color: rgba(94, 143, 163, .62);
}

.margin-ledger {
  min-height: 72vh;
  border-right: 1px solid rgba(94, 143, 163, .28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 1.2rem;
  color: var(--bruised-horizon);
}

.day-mark {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: .8;
  color: rgba(142, 124, 147, .52);
  writing-mode: vertical-rl;
}

.coord {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 .72rem var(--small);
  letter-spacing: .18em;
}

.observation-table {
  width: min(1060px, 88%);
  min-height: 72vh;
  margin-left: clamp(1rem, 5vw, 5.5rem);
  position: relative;
  border: 1px solid rgba(191, 220, 232, .72);
  border-radius: 2px 36px 5px 24px;
  background: linear-gradient(135deg, rgba(244, 241, 232, .68), rgba(191, 220, 232, .24));
  box-shadow: 0 34px 90px rgba(47, 59, 67, .1), inset 0 0 36px rgba(255, 255, 255, .32);
  backdrop-filter: blur(7px);
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.observation-table::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(244, 241, 232, .75);
  pointer-events: none;
}

.observation-table::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -7rem;
  bottom: -9rem;
  border-radius: 50%;
  border: 1px solid rgba(94, 143, 163, .2);
  background: radial-gradient(circle, rgba(191, 220, 232, .18), transparent 62%);
}

h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; }

h1 {
  font-size: clamp(4.6rem, 13vw, 12.5rem);
  letter-spacing: -.055em;
  color: var(--ink-slate);
  position: absolute;
  left: 9%;
  bottom: 26%;
  z-index: 2;
}

h2 {
  max-width: 760px;
  font-size: clamp(3rem, 7.6vw, 7.2rem);
  line-height: .86;
  letter-spacing: -.045em;
  color: rgba(47, 59, 67, .92);
  position: relative;
  z-index: 2;
}

.scene-copy,
.opening-copy,
.closing-line {
  max-width: 35rem;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.72;
  color: rgba(47, 59, 67, .74);
  position: relative;
  z-index: 3;
}

.label-chip {
  display: inline-block;
  margin-bottom: 1rem;
  font: 700 .82rem var(--small);
  letter-spacing: .22em;
  color: var(--waterline);
  border-bottom: 1px solid rgba(143, 191, 168, .8);
}

.hand-note {
  font-family: var(--hand);
  color: var(--bruised-horizon);
  font-size: 1.13rem;
  position: absolute;
  z-index: 4;
  transform: rotate(-4deg);
}

.note-after { left: 14%; top: 21%; }
.note-divide { right: 15%; bottom: 12%; }
.note-inventory { right: 9%; top: 17%; max-width: 18rem; transform: rotate(2deg); }
.note-names { left: 9%; bottom: 10%; }

.hero-table { min-height: 82vh; }

.horizon-line {
  position: absolute;
  left: 7%;
  right: 9%;
  bottom: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--waterline), rgba(142, 124, 147, .55), transparent);
  z-index: 1;
}

.traveling-dew {
  --x: 0%;
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 5.7rem;
  height: 5.7rem;
  margin: -2.85rem 0 0 -2.85rem;
  border-radius: 50%;
  border: 1px solid rgba(94, 143, 163, .48);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.86) 0 .55rem, transparent .6rem),
    radial-gradient(circle at 55% 60%, rgba(191, 220, 232, .56), rgba(244, 241, 232, .32) 62%, rgba(94, 143, 163, .22));
  box-shadow: 0 16px 36px rgba(94, 143, 163, .23), inset -12px -15px 30px rgba(94, 143, 163, .15);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: dewTravel 15s ease-in-out infinite alternate;
}

.traveling-dew span {
  width: 12rem;
  text-align: center;
  font: 400 .92rem var(--hand);
  color: var(--ink-slate);
  transform: scale(1.08);
}

@keyframes dewTravel { from { --x: 7%; } to { --x: 93%; } }

.opening-copy { position: absolute; right: 11%; bottom: 13%; }

.calendar-page {
  position: absolute;
  right: 12%;
  top: 14%;
  width: 8rem;
  height: 10rem;
  background: rgba(244, 241, 232, .82);
  border: 1px solid rgba(142, 124, 147, .24);
  box-shadow: 0 20px 40px rgba(47, 59, 67, .08);
  display: grid;
  place-items: center;
  transform: rotate(3deg);
}

.calendar-page span,
.unopened-page span { font-family: var(--display); font-size: 5.6rem; color: rgba(142, 124, 147, .62); }
.calendar-page em { position: absolute; bottom: .8rem; font: 400 .72rem var(--small); letter-spacing: .14em; color: var(--waterline); }

.moon-remnant {
  position: absolute;
  left: 20%; top: 12%; width: 7rem; height: 7rem; border-radius: 50%;
  border: 1px solid rgba(142, 124, 147, .18);
  box-shadow: inset 1.4rem -.8rem 0 rgba(191, 220, 232, .26);
}

.atmosphere {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  height: 43vh;
  border: 1px solid rgba(94, 143, 163, .34);
  overflow: hidden;
  background: rgba(244, 241, 232, .28);
}

.upper-air,
.lower-water { position: absolute; left: 0; right: 0; transition: height .2s ease, top .2s ease; }
.upper-air { top: 0; height: var(--split, 48%); background: linear-gradient(#BFDCE8, rgba(191, 220, 232, .14)); }
.lower-water { top: var(--split, 48%); bottom: 0; background: linear-gradient(rgba(94, 143, 163, .22), rgba(94, 143, 163, .48)); }

.horizon-rule {
  position: absolute;
  left: 4%;
  right: 4%;
  top: calc(var(--split, 48%) - .7rem);
  height: 1.4rem;
  border: 0;
  border-top: 2px solid var(--waterline);
  background: rgba(244, 241, 232, .42);
  cursor: ns-resize;
  z-index: 4;
  transition: top .2s ease;
}

.horizon-rule span {
  position: absolute;
  right: 1rem;
  top: -1.4rem;
  font: 500 .68rem var(--small);
  color: var(--bruised-horizon);
  letter-spacing: .16em;
}

.chalk-lines { position: absolute; inset: 0; z-index: 3; }
.chalk-lines path { fill: none; stroke: rgba(244, 241, 232, .68); stroke-width: 2; stroke-dasharray: 8 10; }

.dew-field {
  position: relative;
  height: 48vh;
  margin-top: 1rem;
  border-top: 1px solid rgba(143, 191, 168, .42);
}

.pressed-sprig {
  position: absolute;
  left: 23%; top: 2%; width: min(48vw, 31rem); height: 94%;
  filter: drop-shadow(0 18px 20px rgba(47, 59, 67, .08));
}

.stem { fill: none; stroke: rgba(47, 59, 67, .48); stroke-width: 3; }
.leaf { fill: rgba(143, 191, 168, .34); stroke: rgba(143, 191, 168, .82); stroke-width: 2; }

.dew-bead {
  position: absolute;
  z-index: 4;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px solid rgba(94, 143, 163, .44);
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.92) 0 .5rem, transparent .55rem), radial-gradient(circle, rgba(191, 220, 232, .54), rgba(244, 241, 232, .18) 64%);
  box-shadow: 0 24px 38px rgba(94, 143, 163, .18), inset -8px -14px 22px rgba(94, 143, 163, .12);
  color: var(--ink-slate);
  padding: 0;
  transition: transform .45s ease, box-shadow .45s ease;
}

.dew-bead span {
  display: block;
  padding: .7rem;
  font: 400 .85rem var(--hand);
  line-height: 1;
  opacity: .12;
  transform: scale(.72) rotate(-5deg);
  transition: opacity .45s ease, transform .45s ease;
}

.dew-bead:hover,
.dew-bead.is-revealed { transform: scale(1.28); box-shadow: 0 30px 54px rgba(94, 143, 163, .28), inset -8px -14px 22px rgba(94, 143, 163, .12); }
.dew-bead:hover span,
.dew-bead.is-revealed span { opacity: .9; transform: scale(1.08) rotate(-5deg); }

.bead-one { left: 12%; top: 23%; }
.bead-two { left: 48%; top: 12%; }
.bead-three { left: 67%; top: 54%; }
.bead-four { left: 30%; top: 66%; }

.seed-envelope {
  position: absolute;
  right: 8%; bottom: 8%; width: 17rem; padding: 1.4rem;
  background: rgba(247, 220, 164, .32);
  border: 1px solid rgba(142, 124, 147, .24);
  transform: rotate(-2deg);
}
.seed-envelope b { display: block; font: 700 .82rem var(--small); letter-spacing: .18em; color: var(--waterline); }
.seed-envelope span { display: block; margin-top: .6rem; font-size: .95rem; line-height: 1.5; }

.specimen-row {
  display: flex;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: flex-end;
  margin-top: 2.6rem;
  position: relative;
  z-index: 2;
}

.specimen {
  width: clamp(11rem, 21vw, 17rem);
  height: 23rem;
  position: relative;
  border: 1px solid rgba(191, 220, 232, .62);
  background: rgba(244, 241, 232, .3);
  transform: rotate(var(--tilt, -2deg));
}
.specimen:nth-child(2) { --tilt: 2deg; margin-bottom: 2rem; }
.specimen:nth-child(3) { --tilt: -1deg; }

.pin { position: absolute; top: 1.2rem; left: 50%; width: .72rem; height: .72rem; border-radius: 50%; background: var(--bruised-horizon); box-shadow: 0 0 0 .35rem rgba(142, 124, 147, .13); }

.leaf-shape {
  position: absolute;
  left: 50%; top: 35%; width: 7rem; height: 12rem;
  background: rgba(143, 191, 168, .4);
  border: 1px solid rgba(143, 191, 168, .8);
  border-radius: 100% 0 100% 0;
  transform: translate(-50%, -50%) rotate(38deg);
}
.leaf-b { width: 9rem; height: 8rem; border-radius: 60% 40% 65% 35%; background: rgba(191, 220, 232, .46); }
.leaf-c { width: 6rem; height: 13rem; border-radius: 50% 50% 12% 80%; background: rgba(247, 220, 164, .28); }

.name-tag {
  position: absolute;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  min-width: 8rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(142, 124, 147, .36);
  background: rgba(244, 241, 232, .78);
  font: 400 1.28rem var(--hand);
  color: var(--ink-slate);
  box-shadow: 0 12px 22px rgba(47, 59, 67, .08);
  transition: transform .35s ease, background .35s ease;
}
.name-tag.is-today { background: rgba(143, 191, 168, .24); transform: translateX(-50%) rotate(-2deg); }

.threshold-table { display: grid; align-content: center; }
.threshold-gate {
  position: absolute;
  right: 7%;
  top: 18%;
  width: min(46vw, 32rem);
  height: 62%;
  border-bottom: 2px solid rgba(247, 220, 164, .8);
}
.gate-panel {
  position: absolute;
  bottom: 0;
  width: 47%;
  height: 88%;
  border: 1px solid rgba(94, 143, 163, .34);
  background: linear-gradient(120deg, rgba(244, 241, 232, .18), rgba(191, 220, 232, .32));
  box-shadow: inset 0 0 44px rgba(255,255,255,.2);
}
.left-panel { left: 0; transform: skewY(-3deg); }
.right-panel { right: 0; transform: skewY(3deg); }
.unopened-page {
  position: absolute;
  left: 50%; bottom: 8%;
  width: 8rem; height: 10rem;
  transform: translateX(-50%) rotate(-1deg);
  display: grid; place-items: center;
  background: rgba(244, 241, 232, .78);
  border: 1px solid rgba(247, 220, 164, .6);
}
.sun-glint {
  position: absolute;
  right: 8%; top: 10%; width: 8rem; height: 8rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 220, 164, .82), transparent 68%);
  animation: glintPulse 5s ease-in-out infinite;
}
@keyframes glintPulse { 0%,100% { opacity: .42; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.08); } }

.closing-line { margin-top: 2rem; font-family: var(--hand); color: var(--bruised-horizon); font-size: 1.45rem; }

.plate.is-visible .observation-table { animation: tableArrive .9s ease both; }
@keyframes tableArrive { from { opacity: .55; transform: translateY(18px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 820px) {
  .phase-strip { left: auto; right: .7rem; }
  .phase::after { display: none; }
  .plate { grid-template-columns: 4.2rem 1fr; padding-right: 1rem; }
  .observation-table { width: 94%; margin-left: .8rem; padding: 1.4rem; }
  h1 { font-size: clamp(3.8rem, 18vw, 6rem); left: 7%; bottom: 34%; }
  h2 { font-size: clamp(2.8rem, 12vw, 4.6rem); }
  .opening-copy { left: 8%; right: 8%; bottom: 9%; }
  .calendar-page { right: 8%; top: 8%; width: 6rem; height: 7.5rem; }
  .specimen-row { flex-direction: column; align-items: flex-start; }
  .specimen { width: 78%; height: 16rem; }
  .threshold-gate { position: relative; width: 100%; height: 22rem; right: auto; top: auto; margin-top: 2rem; }
}