:root {
  /* Typography compliance: IBM Plex Sans JP** for tiny labels. */
  --typography-token-jp: "JP**";
  --pressed-vellum: #F7EEDC;
  --daisy-white: #FFFDF4;
  --pollen-gold: #E7B94D;
  --stem-green: #567A4A;
  --lacquer-oxblood: #5A1E23;
  --ink-umber: #33251F;
  --ribbon-pink: #D9A0A8;
  --greenhouse-blue: #8FA8B8;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --stamp: "Fraunces", Georgia, serif;
  --sans-jp: "IBM Plex Sans JP", "Hiragino Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-umber);
  background:
    radial-gradient(circle at 22% 14%, rgba(231,185,77,.22), transparent 24%),
    radial-gradient(circle at 82% 68%, rgba(143,168,184,.25), transparent 28%),
    linear-gradient(90deg, var(--lacquer-oxblood) 0 72px, #3a1719 72px 104px, var(--pressed-vellum) 104px);
  font-family: var(--sans-jp);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(51,37,31,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,37,31,.028) 1px, transparent 1px),
    radial-gradient(circle, rgba(90,30,35,.16) 0 1px, transparent 1.6px);
  background-size: 76px 76px, 91px 91px, 19px 19px;
  mix-blend-mode: multiply;
  z-index: 20;
}

.datebook { position: relative; min-height: 500vh; }

.binding-rail {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  bottom: 0;
  width: 104px;
  background: linear-gradient(90deg, #321014, var(--lacquer-oxblood) 45%, #7a2b31 72%, #2a1012);
  box-shadow: inset -14px 0 24px rgba(0,0,0,.35), 14px 0 32px rgba(51,37,31,.22);
}

.binding-rail span {
  position: absolute;
  left: 33px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2bd, var(--pollen-gold) 38%, #8f6421 75%);
  box-shadow: 0 3px 9px rgba(0,0,0,.34), inset 0 -4px 8px rgba(90,30,35,.38);
}
.binding-rail span:nth-child(1) { top: 9vh; }
.binding-rail span:nth-child(2) { top: 29vh; }
.binding-rail span:nth-child(3) { top: 49vh; }
.binding-rail span:nth-child(4) { top: 69vh; }
.binding-rail span:nth-child(5) { top: 89vh; }

.date-tabs {
  position: fixed;
  right: 0;
  top: 13vh;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  font-family: var(--sans-jp);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.date-tabs a {
  color: var(--ink-umber);
  text-decoration: none;
  background: var(--paper, #F7EEDC);
  border: 1px solid rgba(51,37,31,.22);
  border-right: 0;
  border-radius: 13px 0 0 13px;
  padding: 9px 13px 9px 18px;
  box-shadow: -5px 5px 16px rgba(51,37,31,.12);
  transform: translateX(12px);
  transition: transform .45s ease, background .45s ease;
}
.date-tabs a:hover, .date-tabs a.active { transform: translateX(0); background: #FFFDF4; }

.leaf {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7vh 6vw 7vh 140px;
  perspective: 1400px;
}

.page-plane {
  position: relative;
  width: min(1120px, 84vw);
  min-height: 76vh;
  padding: clamp(34px, 6vw, 76px);
  background:
    linear-gradient(135deg, rgba(255,253,244,.78), rgba(247,238,220,.12) 42%, rgba(51,37,31,.04)),
    var(--paper);
  border: 1px solid rgba(51,37,31,.18);
  border-radius: 5px 28px 8px 18px;
  box-shadow: 0 34px 80px rgba(51,37,31,.28), inset 0 0 90px rgba(255,253,244,.42);
  transform: rotate(var(--tilt)) translateY(var(--lift)) translateZ(0);
  transform-origin: 12% 50%;
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1s ease;
}

.leaf:not(.is-visible) .page-plane { transform: rotate(calc(var(--tilt) * .35)) translateY(45px) scale(.96); opacity: .68; }

.page-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 68%, rgba(51,37,31,.07) 70%, transparent 74%),
    repeating-linear-gradient(5deg, rgba(51,37,31,.032) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.page-plane::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 0;
  height: 100%;
  width: 80px;
  background: radial-gradient(ellipse at left, rgba(51,37,31,.22), transparent 66%);
  opacity: .42;
  pointer-events: none;
}

.lacquer-edge {
  position: absolute;
  left: 104px;
  top: 13vh;
  bottom: 13vh;
  width: 34px;
  background: #5A1E23;
  box-shadow: 16px 0 24px rgba(90,30,35,.24);
}

.cover-plane { animation: unfold 1.7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes unfold { from { transform: rotateY(-18deg) rotate(-6deg) translateX(-70px); opacity: .45; } to { transform: rotate(var(--tilt)) translateY(var(--lift)); opacity: 1; } }

.eyebrow, .label, .private-instructions, .future-marginalia, .petal-note {
  font-family: var(--sans-jp);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}

h1, h2 {
  position: relative;
  margin: 0;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 400;
  line-height: .9;
  color: var(--ink);
}

h1 { max-width: 650px; font-size: clamp(74px, 13vw, 176px); letter-spacing: -.055em; }
h2 { max-width: 620px; font-size: clamp(58px, 8vw, 126px); letter-spacing: -.04em; }

.jp-fragment {
  position: relative;
  z-index: 2;
  font-family: var(--jp-serif);
  font-size: clamp(16px, 2vw, 25px);
  color: rgba(51,37,31,.76);
}

.diary-copy {
  position: relative;
  z-index: 2;
  max-width: 510px;
  font-family: var(--jp-serif);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.55;
  color: rgba(51,37,31,.82);
}
.diary-copy.narrow { max-width: 430px; }
.diary-copy.centered { margin-inline: auto; text-align: center; }

.bookmark-button, .ribbon-toggle, .press-again {
  position: relative;
  z-index: 4;
  margin-top: 24px;
  border: 0;
  color: #FFFDF4;
  background: linear-gradient(90deg, var(--lacquer-oxblood), #7e3038);
  box-shadow: 0 9px 22px rgba(90,30,35,.28);
  font-family: var(--sans-jp);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 22px 15px 34px;
  border-radius: 0 18px 18px 0;
  cursor: pointer;
  transition: transform .4s ease, box-shadow .4s ease;
}
.bookmark-button:hover, .ribbon-toggle:hover, .press-again:hover { transform: translateX(8px); box-shadow: 0 13px 28px rgba(90,30,35,.34); }

.brass-corner { position: absolute; width: 74px; height: 74px; border-color: var(--pollen-gold); opacity: .82; z-index: 3; }
.top-left { left: 18px; top: 18px; border-top: 8px solid; border-left: 8px solid; }
.bottom-right { right: 18px; bottom: 18px; border-right: 8px solid; border-bottom: 8px solid; }

.clasp-line { position: absolute; z-index: 3; left: 12%; right: 8%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--pollen-gold), transparent); transform-origin: left; transition: transform 1s ease, opacity .7s ease; }
.clasp-line span { position: absolute; right: 21%; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--pollen-gold); box-shadow: 0 2px 8px rgba(51,37,31,.28); }
body.opened .clasp-line { transform: scaleX(.2) rotate(-10deg); opacity: .2; }

.paper-peek { position: absolute; right: 7%; bottom: 10%; width: 30%; height: 26%; background: rgba(255,253,244,.42); transform: rotate(-8deg); filter: blur(.2px); }

.pressed-daisy, .calendar-daisy { position: absolute; z-index: 3; }
.large-daisy { right: 10%; top: 14%; width: 245px; height: 245px; filter: sepia(.35) drop-shadow(0 18px 22px rgba(51,37,31,.18)); opacity: .88; }
.pressed-daisy i, .calendar-daisy .petal, .wreath span {
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 104px;
  margin: -92px 0 0 -18px;
  border: 1px solid rgba(51,37,31,.16);
  border-radius: 70% 70% 54% 54%;
  background: radial-gradient(ellipse at 50% 18%, #FFFDF4 0 30%, #F7EEDC 62%, rgba(217,160,168,.42));
  transform-origin: 50% 92px;
}
.pressed-daisy i:nth-child(1) { transform: rotate(0deg); } .pressed-daisy i:nth-child(2) { transform: rotate(30deg); }
.pressed-daisy i:nth-child(3) { transform: rotate(60deg); } .pressed-daisy i:nth-child(4) { transform: rotate(90deg); }
.pressed-daisy i:nth-child(5) { transform: rotate(120deg); } .pressed-daisy i:nth-child(6) { transform: rotate(150deg); }
.pressed-daisy i:nth-child(7) { transform: rotate(180deg); } .pressed-daisy i:nth-child(8) { transform: rotate(210deg); }
.pressed-daisy i:nth-child(9) { transform: rotate(240deg); } .pressed-daisy i:nth-child(10) { transform: rotate(270deg); }
.pressed-daisy i:nth-child(11) { transform: rotate(300deg); } .pressed-daisy i:nth-child(12) { transform: rotate(330deg); }
.pressed-daisy b { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff2a6, var(--pollen-gold) 48%, #9d7529); }

.calendar-daisy { left: 50%; top: 48%; width: 300px; height: 300px; margin: -150px; }
.calendar-daisy .petal { appearance: none; border: 1px solid rgba(51,37,31,.2); cursor: pointer; transition: filter .35s ease, transform .45s ease, background .45s ease; }
.calendar-daisy .petal:hover, .calendar-daisy .petal.chosen { background: radial-gradient(ellipse at 50% 18%, #FFFDF4, #E7B94D 74%); filter: saturate(1.2); }
.calendar-daisy .p1 { transform: rotate(0deg); } .calendar-daisy .p2 { transform: rotate(30deg); }
.calendar-daisy .p3 { transform: rotate(60deg); } .calendar-daisy .p4 { transform: rotate(90deg); }
.calendar-daisy .p5 { transform: rotate(120deg); } .calendar-daisy .p6 { transform: rotate(150deg); }
.calendar-daisy .p7 { transform: rotate(180deg); } .calendar-daisy .p8 { transform: rotate(210deg); }
.calendar-daisy .p9 { transform: rotate(240deg); } .calendar-daisy .p10 { transform: rotate(270deg); }
.calendar-daisy .p11 { transform: rotate(300deg); } .calendar-daisy .p12 { transform: rotate(330deg); }
.daisy-heart { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px; display: grid; place-items: center; border-radius: 50%; background: var(--pollen-gold); font-family: var(--stamp); font-size: 33px; box-shadow: inset 0 -8px 13px rgba(90,30,35,.16); }
.thread-loop { position: absolute; left: 62%; top: 30%; width: 78px; height: 42px; border: 3px solid var(--lacquer-oxblood); border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }

.annotation-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: rgba(51,37,31,.47); stroke-width: 1.4; stroke-dasharray: 780; stroke-dashoffset: 780; }
.is-visible .annotation-lines path { animation: drawLine 2.4s ease forwards; }
.annotation-lines path:nth-child(2) { animation-delay: .25s; } .annotation-lines path:nth-child(3) { animation-delay: .45s; } .annotation-lines path:nth-child(4) { animation-delay: .65s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.chapter-stamp {
  position: absolute;
  right: 8%;
  top: 9%;
  z-index: 2;
  font-family: var(--stamp);
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 800;
  color: rgba(90,30,35,.78);
  transform: rotate(7deg);
  mix-blend-mode: multiply;
  letter-spacing: -.05em;
}
.chapter-stamp.pale { color: rgba(255,253,244,.65); text-shadow: 0 2px 16px rgba(51,37,31,.22); }
.chapter-stamp.tomorrow { color: rgba(86,122,74,.76); right: 6%; }

.label { position: absolute; z-index: 3; color: rgba(51,37,31,.65); max-width: 220px; }
.label-one { left: 8%; top: 20%; } .label-two { right: 8%; top: 58%; } .label-three { left: 12%; bottom: 15%; }
.petal-note { position: absolute; left: 50%; bottom: 10%; z-index: 4; transform: translateX(-50%); padding: 9px 14px; background: rgba(255,253,244,.72); border: 1px solid rgba(51,37,31,.18); border-radius: 999px; }

.pin { position: absolute; z-index: 4; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, white, var(--pollen-gold) 45%, #6d4b18); box-shadow: 0 5px 11px rgba(0,0,0,.24); }
.pin-a { left: 6%; top: 10%; } .pin-b { right: 14%; bottom: 10%; }

.red-thread { position: absolute; z-index: 3; height: 3px; background: linear-gradient(90deg, transparent, var(--lacquer-oxblood), #D9A0A8, var(--lacquer-oxblood), transparent); box-shadow: 0 2px 8px rgba(90,30,35,.18); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.thread-one { left: 5%; right: 4%; top: 42%; transform: rotate(8deg) scaleX(1); }
.thread-two { left: 10%; right: 8%; top: 57%; transform: rotate(-12deg) scaleX(1); }
body.ribbon-loose .thread-one { transform: rotate(2deg) scaleX(.72); }
body.ribbon-loose .thread-two { transform: rotate(-4deg) scaleX(.66); }

.calendar-notch { position: absolute; right: 0; top: 38%; writing-mode: vertical-rl; padding: 18px 8px; background: var(--daisy-white); border: 1px solid rgba(51,37,31,.18); font-family: var(--jp-serif); }
.stem-specimen { position: absolute; right: 23%; bottom: 13%; width: 190px; height: 390px; transform: rotate(-22deg); }
.stem { position: absolute; left: 90px; top: 0; width: 7px; height: 100%; background: linear-gradient(var(--stem-green), rgba(86,122,74,.55)); border-radius: 999px; }
.leaflet { position: absolute; width: 80px; height: 34px; border-radius: 100% 0; background: rgba(86,122,74,.5); border: 1px solid rgba(51,37,31,.12); }
.leaflet.left { left: 15px; top: 170px; transform: rotate(25deg); } .leaflet.right { right: 8px; top: 230px; transform: rotate(205deg); }
.sealed-pin { position: absolute; left: 78px; top: 70px; width: 32px; height: 32px; border-radius: 50%; background: var(--pollen-gold); box-shadow: 0 4px 10px rgba(51,37,31,.25); }
.envelope-seal { position: absolute; left: 12%; bottom: 18%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--lacquer-oxblood); color: #F7EEDC; font-family: var(--jp-serif); font-size: 30px; box-shadow: 0 10px 24px rgba(90,30,35,.26); }
.private-instructions { position: relative; z-index: 3; margin: 30px 0 0; padding: 0; list-style: none; color: rgba(51,37,31,.66); line-height: 2; }

.dusk-plane { background: linear-gradient(rgba(247,238,220,.55), rgba(143,168,184,.78)), var(--greenhouse-blue); color: var(--ink-umber); }
.greenhouse-shadow { position: absolute; inset: -20%; background: repeating-linear-gradient(66deg, transparent 0 86px, rgba(51,37,31,.15) 87px 93px), repeating-linear-gradient(-24deg, transparent 0 130px, rgba(51,37,31,.12) 131px 137px); animation: panes 11s ease-in-out infinite alternate; }
@keyframes panes { from { transform: translateX(-28px) translateY(0); } to { transform: translateX(34px) translateY(22px); } }
.vellum-sheet { position: absolute; inset: 12%; background: rgba(255,253,244,.36); border: 1px solid rgba(255,253,244,.42); backdrop-filter: blur(1px); transform: rotate(-3deg); }
.ghost-petals span { position: absolute; width: 54px; height: 118px; border-radius: 70% 70% 55% 55%; background: rgba(255,253,244,.23); border: 1px solid rgba(255,253,244,.22); filter: blur(.2px); }
.ghost-petals span:nth-child(1){left:23%;top:18%;transform:rotate(12deg)} .ghost-petals span:nth-child(2){left:62%;top:28%;transform:rotate(72deg)}
.ghost-petals span:nth-child(3){left:70%;top:60%;transform:rotate(148deg)} .ghost-petals span:nth-child(4){left:30%;top:66%;transform:rotate(210deg)}
.ghost-petals span:nth-child(5){left:48%;top:43%;transform:rotate(290deg)} .ghost-petals span:nth-child(6){left:15%;top:48%;transform:rotate(332deg)}
.dew-rings span { position: absolute; border: 1px solid rgba(255,253,244,.45); border-radius: 50%; }
.dew-rings span:nth-child(1){right:18%;bottom:18%;width:84px;height:84px}.dew-rings span:nth-child(2){right:25%;bottom:26%;width:38px;height:38px}.dew-rings span:nth-child(3){left:18%;top:18%;width:120px;height:120px}

.wreath { position: relative; z-index: 2; width: 360px; height: 360px; margin: 0 auto 20px; transition: transform 1s ease; }
.wreath span { width: 42px; height: 98px; margin: -49px 0 0 -21px; transform: rotate(var(--r)) translateY(-122px); transform-origin: 50% 172px; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
body.scatter .wreath span { transform: rotate(var(--r)) translateY(-162px) rotate(18deg); opacity: .72; }
.press-again { display: block; margin-inline: auto; background: linear-gradient(90deg, var(--stem-green), #78965f); }
.future-marginalia { position: absolute; left: 7%; bottom: 8%; color: rgba(51,37,31,.54); transform: rotate(-4deg); }

@media (max-width: 800px) {
  body { background: linear-gradient(90deg, var(--lacquer-oxblood) 0 38px, var(--pressed-vellum) 38px); }
  .binding-rail { width: 44px; }
  .binding-rail span { left: 12px; width: 18px; height: 18px; }
  .leaf { padding: 7vh 22px 7vh 58px; }
  .page-plane { width: 100%; min-height: 82vh; padding: 32px 24px; }
  .date-tabs { display: none; }
  .large-daisy { opacity: .35; right: -40px; top: 8%; }
  .calendar-daisy { transform: scale(.75); }
  .label, .petal-note { display: none; }
  .chapter-stamp { top: auto; bottom: 8%; }
}