:root {
  --plum: #1B1020;
  --violet: #4A264F;
  --milk: #FFF6D8;
  --green: #6F8E72;
  --rose: #E9A7B0;
  --brass: #C8A45D;
  --mist: #BFD8D2;
  --fraunces: Fraunces, Georgia, 'Times New Roman', serif;
  --cormorant: 'Cormorant Infant', 'Iowan Old Style', Palatino, serif;
  --jp: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --manrope: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--plum); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--milk);
  background:
    radial-gradient(circle at 20% 8%, rgba(233,167,176,.16), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(191,216,210,.12), transparent 30rem),
    linear-gradient(115deg, var(--plum), #120918 44%, var(--violet));
  font-family: var(--cormorant);
  overflow-x: hidden;
}

.folio-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,246,216,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 55%, rgba(191,216,210,.55) 0 .7px, transparent 1.2px),
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 40%, rgba(0,0,0,.05));
  background-size: 19px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.night-folio { position: relative; z-index: 1; }
.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(18rem, 34rem) minmax(16rem, 40rem) minmax(1rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 6rem);
  isolation: isolate;
  overflow: hidden;
}
.spread::before {
  content: attr(data-chapter);
  position: absolute;
  left: 4vw;
  top: 4vh;
  font: 900 clamp(5rem, 18vw, 18rem)/.8 var(--fraunces);
  color: rgba(200,164,93,.08);
  text-shadow: 0 0 35px rgba(200,164,93,.08);
  z-index: -1;
}
.spread::after {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(200,164,93,.28);
  border-radius: 48% 52% 44% 56% / 5% 9% 6% 8%;
  box-shadow: inset 0 0 0 10px rgba(255,246,216,.025), 0 0 70px rgba(191,216,210,.06);
  pointer-events: none;
}

h1, h2, .chapter-num { font-family: var(--fraunces); letter-spacing: -.04em; }
h1 { margin: .15em 0; font-size: clamp(3.2rem, 9vw, 8.6rem); line-height: .82; color: var(--milk); text-shadow: 0 0 24px rgba(255,246,216,.2); }
h2 { margin: 0 0 .6rem; font-size: clamp(2.2rem, 5.5vw, 5.4rem); line-height: .88; color: var(--milk); }
p { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; }
.stamp, .calendar-tabs, .ribbon-button, .ledger-tabs, .ribbon-spool { font-family: var(--manrope); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.stamp { color: var(--brass); font-family: var(--jp); }

.calendar-tabs {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: .55rem;
}
.tab {
  width: 4.1rem;
  min-height: 2.2rem;
  padding: .4rem .45rem;
  color: var(--milk);
  text-decoration: none;
  background: linear-gradient(100deg, rgba(255,246,216,.16), rgba(74,38,79,.68));
  border: 1px solid rgba(200,164,93,.45);
  border-right: 4px solid var(--brass);
  border-radius: 1rem .2rem .2rem 1rem;
  transform-origin: right center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), background .55s;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.tab span { display: block; color: var(--brass); font-weight: 800; }
.tab em { display: block; font-style: normal; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .3s, max-width .4s; }
.tab.active { transform: translateX(-.9rem) rotate(-4deg); background: linear-gradient(100deg, rgba(255,246,216,.28), rgba(233,167,176,.25)); }
.tab.active em, .tab:hover em { opacity: 1; max-width: 5rem; }

.scent-ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 600vh; z-index: 3; pointer-events: none; opacity: .82; }
#scentPath { fill: none; stroke: var(--mist); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgba(191,216,210,.55)); }

.greenhouse-door {
  grid-column: 2 / 4;
  justify-self: center;
  width: min(78vw, 54rem);
  height: min(76vh, 42rem);
  border: 2px solid rgba(111,142,114,.55);
  border-radius: 48% 48% 1.2rem 1.2rem / 18% 18% 1.2rem 1.2rem;
  background: linear-gradient(135deg, rgba(191,216,210,.13), rgba(74,38,79,.36)), repeating-linear-gradient(90deg, transparent 0 5rem, rgba(191,216,210,.08) 5.1rem 5.25rem);
  box-shadow: inset 0 0 80px rgba(191,216,210,.09), 0 40px 90px rgba(0,0,0,.45);
}
.glass-arch { position: absolute; inset: 10vh 18vw auto; height: 35vh; border-top: 1px solid rgba(191,216,210,.42); border-radius: 50% 50% 0 0; }
.door-ribs, .door-ribs::before, .door-ribs::after { position: absolute; content: ""; inset: 18% 30%; border: 1px solid rgba(200,164,93,.28); border-radius: 50% 50% 3rem 3rem; }
.door-ribs::before { inset: -10% 21%; }
.door-ribs::after { inset: 12% -28%; }
.condensation i { position: absolute; width: .45rem; height: 2.2rem; border-radius: 1rem; background: linear-gradient(var(--mist), transparent); opacity: .5; animation: bead 5s infinite ease-in; }
.condensation i:nth-child(1){ left:22%; top:20%; } .condensation i:nth-child(2){ left:68%; top:27%; animation-delay:1s; } .condensation i:nth-child(3){ left:43%; top:16%; animation-delay:2s; } .condensation i:nth-child(4){ left:77%; top:52%; animation-delay:.4s; } .condensation i:nth-child(5){ left:31%; top:60%; animation-delay:1.8s; }

.invitation-card {
  grid-column: 2 / 3;
  position: relative;
  margin-left: 6vw;
  padding: clamp(1.4rem, 4vw, 3rem);
  max-width: 34rem;
  background: linear-gradient(145deg, var(--milk), #eadcb6 64%, #d9c99b);
  color: var(--plum);
  border: 1px solid rgba(200,164,93,.75);
  border-radius: 1.1rem 2.2rem 1.4rem 2.8rem;
  box-shadow: 0 35px 70px rgba(0,0,0,.38), inset 0 0 0 9px rgba(255,255,255,.16);
  transform: rotate(-5deg) translateY(1rem);
  animation: breathe 4.5s ease-in-out infinite;
}
.invitation-card.opened .card-fold { transform: rotateY(-145deg); }
.lead { color: var(--violet); }
.card-fold { position: absolute; inset: 0 50% 0 0; background: linear-gradient(100deg, rgba(255,246,216,.58), rgba(233,167,176,.18)); transform-origin: left; transition: transform 1.5s cubic-bezier(.2,.75,.18,1); border-radius: inherit; pointer-events: none; }
.ledger-tabs { position: absolute; right: -5rem; top: 18%; display: grid; gap: .45rem; color: var(--plum); }
.ledger-tabs span { padding: .55rem .8rem; background: var(--rose); border: 1px solid var(--brass); border-radius: .3rem .9rem .9rem .3rem; transform: translateX(-2rem); opacity: 0; transition: 1s ease; }
.opened .ledger-tabs span { transform: translateX(0); opacity: 1; }
.opened .ledger-tabs span:nth-child(2){ transition-delay:.18s; } .opened .ledger-tabs span:nth-child(3){ transition-delay:.36s; }

.jasmine-cluster { grid-column: 3; position: relative; width: 17rem; height: 17rem; justify-self: center; }
.jasmine-cluster b, .closing-buds b { position: absolute; left: 50%; top: 50%; width: 5.5rem; height: 2.2rem; background: radial-gradient(circle at 75% 50%, #fff, var(--milk) 55%, #dccb96); border-radius: 90% 10% 90% 10%; transform-origin: 0 50%; box-shadow: 0 0 20px rgba(255,246,216,.25); }
.jasmine-cluster b:nth-child(1){ transform: rotate(0deg) scaleX(.15); } .jasmine-cluster b:nth-child(2){ transform: rotate(72deg) scaleX(.15); } .jasmine-cluster b:nth-child(3){ transform: rotate(144deg) scaleX(.15); } .jasmine-cluster b:nth-child(4){ transform: rotate(216deg) scaleX(.15); } .jasmine-cluster b:nth-child(5){ transform: rotate(288deg) scaleX(.15); }
.is-visible .jasmine-cluster b { animation: unfurl 1.8s cubic-bezier(.16,.9,.25,1) forwards; }
.is-visible .jasmine-cluster b:nth-child(2){ animation-delay:.12s; } .is-visible .jasmine-cluster b:nth-child(3){ animation-delay:.24s; } .is-visible .jasmine-cluster b:nth-child(4){ animation-delay:.36s; } .is-visible .jasmine-cluster b:nth-child(5){ animation-delay:.48s; }
.marginal-note { position: absolute; left: 7vw; bottom: 8vh; max-width: 16rem; color: var(--mist); font-style: italic; transform: rotate(-6deg); }

.artifact, .oval-medallion, .envelope, .blotter, .table-note, .cancellation-slip, .specimen-tag {
  background: linear-gradient(145deg, rgba(255,246,216,.96), rgba(255,246,216,.78));
  color: var(--plum);
  border: 1px solid rgba(200,164,93,.75);
  box-shadow: 0 28px 70px rgba(0,0,0,.35), inset 0 0 0 8px rgba(200,164,93,.11);
}
.dance-card { grid-column: 2 / 3; padding: 2rem; border-radius: 1rem 3rem 1rem 2rem; transform: rotate(3deg); }
.chapter-num { color: var(--brass); font-size: 5rem; }
.signature-lines p { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; border-bottom: 1px dotted rgba(74,38,79,.4); margin: 0; padding: .85rem 0; }
.signature-lines span { color: var(--brass); font-family: var(--manrope); font-size: .75rem; letter-spacing: .1em; }
.signature-lines em { font-style: italic; }
.brass-wheel { grid-column: 3; width: clamp(16rem, 30vw, 26rem); aspect-ratio: 1; border: 2px solid var(--brass); border-radius: 50%; display: grid; place-items: center; background: repeating-conic-gradient(from 12deg, rgba(200,164,93,.26) 0 7deg, transparent 7deg 22deg), radial-gradient(circle, rgba(255,246,216,.12), rgba(74,38,79,.48)); color: var(--brass); font: 900 6rem var(--fraunces); box-shadow: 0 0 60px rgba(200,164,93,.12); }
.specimen-tag { position: absolute; right: 14vw; bottom: 13vh; padding: 1rem 1.2rem; border-radius: .3rem; transform: rotate(-8deg); font-family: var(--jp); }
.specimen-tag span { display: block; opacity: 0; max-height: 0; transition: .5s; font-family: var(--cormorant); }
.specimen-tag:hover span { opacity: 1; max-height: 3rem; }
.poem { grid-column: 3 / 4; align-self: end; color: var(--mist); max-width: 28rem; font-style: italic; }

.clock-face { grid-column: 2 / 3; justify-self: center; position: relative; width: clamp(18rem, 38vw, 32rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(191,216,210,.45); background: radial-gradient(circle, rgba(255,246,216,.2), rgba(74,38,79,.35) 46%, rgba(27,16,32,.2)); }
.clock-face i { position: absolute; left: 50%; top: 50%; width: 8.5rem; height: 3.5rem; margin-left: -.25rem; background: radial-gradient(circle at 75% 50%, #fff, var(--milk) 58%, rgba(233,167,176,.7)); border-radius: 85% 15% 85% 15%; transform-origin: .25rem center; transform: rotate(var(--a)) translateX(1rem); opacity: .9; }
.clock-center { position: absolute; inset: 34%; display: grid; place-items: center; border-radius: 50%; background: var(--plum); color: var(--brass); font: 900 3rem var(--fraunces); z-index: 2; border: 1px solid var(--brass); }
.oval-medallion { grid-column: 3 / 4; padding: 2.5rem; border-radius: 50%; min-height: 24rem; display: grid; align-content: center; transform: rotate(-3deg); }
.dew-numbers { position: absolute; right: 12vw; top: 19vh; color: var(--mist); font: 900 clamp(3rem, 8vw, 8rem) var(--fraunces); opacity: .18; filter: blur(.4px); }
.dew-numbers span { display: inline-block; animation: bead 6s infinite; }

.envelope-stack { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(18rem, 34rem) minmax(14rem, 23rem); align-items: center; gap: 2rem; }
.envelope { position: relative; padding: 2.5rem; min-height: 23rem; clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); transform: rotate(2deg); }
.wax-seal { position: absolute; right: 2rem; bottom: 4rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--rose), #b95e75); color: var(--milk); font: 900 2rem var(--fraunces); box-shadow: inset 0 0 18px rgba(74,38,79,.35); transition: filter .7s, transform .7s; }
.envelope:hover .wax-seal { filter: blur(.5px) saturate(1.2); transform: scale(.96); }
.blotter { padding: 1.4rem; min-height: 18rem; border-radius: 10rem; writing-mode: vertical-rl; color: var(--violet); transform: rotate(-8deg); }
.moth { position: absolute; right: 17vw; top: 18vh; width: 7rem; height: 3rem; animation: moth 8s ease-in-out infinite; }
.moth::before, .moth::after { content: ""; position: absolute; width: 3.8rem; height: 2.4rem; background: radial-gradient(circle at 60% 40%, var(--milk), rgba(191,216,210,.5)); border-radius: 80% 20%; }
.moth::before { transform: rotate(22deg); left: 0; } .moth::after { transform: scaleX(-1) rotate(22deg); right: 0; }
.moth span { position: absolute; left: 3.1rem; top: .8rem; width: 1rem; height: 1.8rem; background: var(--brass); border-radius: 50%; z-index: 2; }
.ribbon-spool { position: absolute; left: 12vw; bottom: 13vh; color: var(--rose); border-bottom: 1px solid var(--rose); padding-bottom: .3rem; }

.porcelain-stand { grid-column: 2 / 3; justify-self: center; width: min(30rem, 75vw); display: grid; gap: 1.5rem; justify-items: center; }
.tier { height: 4.8rem; border-radius: 50%; background: linear-gradient(var(--milk), #dcd2b4); border: 1px solid var(--brass); color: var(--violet); display: grid; place-items: center; box-shadow: 0 22px 45px rgba(0,0,0,.28); font-family: var(--fraunces); }
.tier.top { width: 11rem; } .tier.middle { width: 21rem; } .tier.bottom { width: 28rem; font-family: var(--cormorant); font-style: italic; }
.teacup { position: absolute; left: 20vw; bottom: 19vh; width: 7rem; height: 4rem; border: 2px solid var(--milk); border-radius: 0 0 4rem 4rem; }
.teacup i { position: absolute; bottom: 4rem; width: 1px; height: 6rem; background: var(--mist); animation: steam 4s infinite ease-in-out; opacity: .6; }
.teacup i:nth-child(1){ left:2rem; } .teacup i:nth-child(2){ left:3.5rem; animation-delay:.8s; } .teacup i:nth-child(3){ left:5rem; animation-delay:1.6s; }
.table-note { grid-column: 3 / 4; padding: 2rem; border-radius: 3rem 1rem 2rem 1rem; transform: rotate(4deg); }
.moon-token { position: absolute; right: 12vw; top: 14vh; width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; color: var(--brass); font: 900 3rem var(--jp); box-shadow: inset -22px 0 0 rgba(255,246,216,.12); }

.cancellation-slip { grid-column: 2 / 4; justify-self: center; max-width: 42rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 1rem 1rem 7rem 1rem; text-align: center; transform: rotate(-2deg); }
.ribbon-button { cursor: pointer; color: var(--plum); background: var(--rose); border: 1px solid var(--brass); padding: .9rem 1.2rem; border-radius: 99rem; box-shadow: 0 12px 25px rgba(0,0,0,.2); }
.dissolving-date { position: absolute; right: 14vw; bottom: 13vh; font: 900 16rem var(--fraunces); color: rgba(191,216,210,.13); animation: dissolve 7s infinite ease-in-out; }
.closing-buds { position: absolute; left: 13vw; top: 17vh; width: 13rem; height: 13rem; transform: scale(.75); opacity: .7; }
.closing-buds b:nth-child(1){ transform: rotate(0deg) scaleX(.9); } .closing-buds b:nth-child(2){ transform: rotate(90deg) scaleX(.9); } .closing-buds b:nth-child(3){ transform: rotate(180deg) scaleX(.9); } .closing-buds b:nth-child(4){ transform: rotate(270deg) scaleX(.9); }

.tilt-note { transition: transform .28s ease, box-shadow .28s ease; transform-style: preserve-3d; }
.is-visible .artifact, .is-visible .oval-medallion, .is-visible .envelope, .is-visible .table-note, .is-visible .cancellation-slip { animation: pageTurn .9s cubic-bezier(.2,.8,.2,1) both; }

@keyframes breathe { 0%,100%{ box-shadow: 0 35px 70px rgba(0,0,0,.38), 0 0 0 rgba(191,216,210,0); transform: rotate(-5deg) translateY(1rem); } 50%{ box-shadow: 0 42px 80px rgba(0,0,0,.42), 0 0 42px rgba(191,216,210,.16); transform: rotate(-4.2deg) translateY(.4rem); } }
@keyframes unfurl { to { transform: rotate(var(--final, 0deg)) scaleX(1); } }
.jasmine-cluster b:nth-child(1){ --final:0deg; } .jasmine-cluster b:nth-child(2){ --final:72deg; } .jasmine-cluster b:nth-child(3){ --final:144deg; } .jasmine-cluster b:nth-child(4){ --final:216deg; } .jasmine-cluster b:nth-child(5){ --final:288deg; }
@keyframes bead { 0%,100%{ transform: translateY(0); opacity:.35; } 50%{ transform: translateY(1.1rem); opacity:.8; } }
@keyframes pageTurn { from { opacity: 0; transform: translateY(3rem) rotateY(-18deg) rotate(var(--r,0deg)); } to { opacity: 1; } }
@keyframes moth { 0%,100%{ transform: translate(0,0) rotate(-8deg); } 50%{ transform: translate(-5rem,2rem) rotate(9deg); } }
@keyframes steam { 0%{ transform: translateY(1rem) translateX(0) scaleY(.5); opacity:0; } 50%{ opacity:.65; } 100%{ transform: translateY(-3rem) translateX(1.4rem) scaleY(1.2); opacity:0; } }
@keyframes dissolve { 0%,100%{ filter: blur(0); opacity:.55; } 50%{ filter: blur(9px); opacity:.12; transform: translateY(-1rem); } }

@media (max-width: 820px) {
  .spread { grid-template-columns: 1fr; padding-right: 5.5rem; align-content: center; }
  .spread > * { grid-column: 1 !important; }
  .greenhouse-door { width: 88vw; height: 68vh; }
  .invitation-card { margin-left: 0; }
  .ledger-tabs { right: -2.5rem; }
  .calendar-tabs { right: .35rem; }
  .envelope-stack { grid-template-columns: 1fr; }
  .blotter { writing-mode: horizontal-tb; min-height: auto; border-radius: 2rem; }
  .scent-ribbon { width: 180%; left: -45%; }
}