:root {
  /* IBM Plex Mono* Mono** sparingly for tiny accession numbers */
  --aurora-green: #7AF7C4;
  --midnight: #06152E;
  --ink: #020817;
  --violet: #7B5CFF;
  --paper: #E8E0CF;
  --mauve: #B890C8;
  --gold: #C9A76A;
  --glass: rgba(232, 224, 207, 0.075);
  --spine: min(78vw, 680px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper);
  font-family: "Commissioner", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 12%, rgba(123, 92, 255, 0.18), transparent 34rem),
    linear-gradient(180deg, var(--ink), var(--midnight) 32%, var(--ink));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(232, 224, 207, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 224, 207, 0.03) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  mix-blend-mode: screen;
}

.night-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

.aurora {
  position: absolute;
  width: 42vw;
  height: 145vh;
  top: -24vh;
  filter: blur(34px);
  opacity: 0.46;
  border-radius: 48% 52% 46% 54%;
  mix-blend-mode: screen;
  transform-origin: 50% 70%;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.aurora-one { left: 4vw; background: linear-gradient(180deg, transparent, rgba(122, 247, 196, 0.56), rgba(123, 92, 255, 0.15), transparent); }
.aurora-two { right: 2vw; background: linear-gradient(180deg, transparent, rgba(184, 144, 200, 0.38), rgba(122, 247, 196, 0.28), transparent); animation-duration: 23s; animation-delay: -6s; }
.aurora-three { left: 34vw; width: 28vw; background: linear-gradient(180deg, transparent, rgba(123, 92, 255, 0.32), rgba(122, 247, 196, 0.18), transparent); animation-duration: 27s; animation-delay: -11s; }

.star-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(232,224,207,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 22%, rgba(201,167,106,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 68%, rgba(122,247,196,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(232,224,207,.45) 0 1px, transparent 2px);
}

.cabinet {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 6vh 0 12vh;
}

.sheet {
  --shift: 0px;
  position: relative;
  width: var(--spine);
  min-height: 92vh;
  margin: 0 auto 13vh;
  padding: clamp(2rem, 5vw, 4.5rem);
  transform: translateX(var(--shift));
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border: 1px solid rgba(232, 224, 207, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(232,224,207,.13), rgba(232,224,207,.035) 42%, rgba(122,247,196,.05)),
    radial-gradient(circle at 20% 18%, rgba(232,224,207,.12), transparent 19rem);
  box-shadow: 0 34px 90px rgba(2, 8, 23, 0.7), inset 0 1px 0 rgba(232,224,207,.22);
  backdrop-filter: blur(18px);
}

.sheet::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  z-index: -1;
  border-radius: 22px;
  border: 1px dashed rgba(201, 167, 106, 0.24);
  opacity: 0.78;
}

.title-plate { min-height: 96vh; }
.pressed-plate { --shift: 24px; }
.notes-plate { --shift: -20px; }
.aurora-bloom { --shift: 18px; overflow: hidden; }
.seed-envelope { --shift: -26px; min-height: 78vh; }

.archive-line, .mono, .side-caption, .paper-tag, .annotation-strip, .label-note {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.archive-line {
  position: absolute;
  top: 2rem;
  left: 2.2rem;
  color: rgba(232, 224, 207, 0.58);
}

.title-content { max-width: 560px; margin-top: 22vh; }
.kicker, .side-caption { color: var(--gold); }

h1, h2, blockquote { margin: 0; font-weight: 300; }

h1 {
  font-size: clamp(4.4rem, 14vw, 9.8rem);
  line-height: 0.82;
  letter-spacing: -0.075em;
  color: var(--paper);
  text-shadow: 0 0 30px rgba(123, 92, 255, 0.42);
}

h2 {
  max-width: 570px;
  font-size: clamp(2.45rem, 7vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.poem, blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: rgba(232, 224, 207, 0.9);
}

.poem { margin: 1.2rem 0 0; font-size: clamp(1.5rem, 4vw, 2.6rem); }
blockquote { max-width: 580px; font-size: clamp(2.3rem, 7vw, 5.1rem); line-height: 0.96; }
.copy { max-width: 480px; margin: 1.6rem 0 0 auto; color: rgba(232,224,207,.72); font-size: 1.05rem; line-height: 1.85; font-weight: 300; }

.specimen-wrap { position: absolute; inset: 0; z-index: -1; }
.lupine-stem { position: absolute; left: 50%; top: 12%; width: 170px; height: 650px; transform: translateX(-50%); opacity: 0.92; }
.stem-line { position: absolute; left: 50%; top: 105px; bottom: 0; width: 2px; background: linear-gradient(var(--aurora-green), rgba(232,224,207,.2)); box-shadow: 0 0 16px rgba(122,247,196,.45); }
.petal, .bloom-petal {
  position: absolute;
  width: 54px;
  height: 74px;
  border-radius: 64% 36% 62% 38% / 58% 42% 58% 42%;
  background:
    radial-gradient(circle at 35% 28%, rgba(232,224,207,.24), transparent 24%),
    linear-gradient(145deg, rgba(184,144,200,.86), rgba(123,92,255,.78) 55%, rgba(122,247,196,.22));
  box-shadow: 0 0 20px rgba(123, 92, 255, 0.34), inset 0 0 16px rgba(232,224,207,.08);
  opacity: 0;
  transform: scale(.6) translateY(34px) rotate(var(--rot, 0deg));
}
.petal.in-view, .bloom-petal.in-view { animation: petalSettle .85s cubic-bezier(.18,1.42,.42,1) forwards; animation-delay: var(--delay, 0s); }
.p1{left:60px;top:0;--rot:-8deg;--delay:.05s}.p2{left:25px;top:46px;--rot:-38deg;--delay:.13s}.p3{left:86px;top:58px;--rot:32deg;--delay:.18s}.p4{left:40px;top:114px;--rot:-24deg;--delay:.25s}.p5{left:91px;top:128px;--rot:24deg;--delay:.31s}.p6{left:18px;top:184px;--rot:-44deg;--delay:.38s}.p7{left:96px;top:205px;--rot:37deg;--delay:.45s}.p8{left:40px;top:262px;--rot:-18deg;--delay:.52s}.p9{left:88px;top:292px;--rot:22deg;--delay:.58s}.p10{left:23px;top:355px;--rot:-36deg;--delay:.64s}.p11{left:98px;top:390px;--rot:31deg;--delay:.72s}.p12{left:55px;top:456px;--rot:-6deg;--delay:.8s}
.leaf { position: absolute; bottom: 80px; width: 140px; height: 44px; border: 1px solid rgba(122,247,196,.58); border-radius: 100% 0; }
.leaf-left { right: 84px; transform: rotate(20deg); }.leaf-right { left: 88px; transform: scaleX(-1) rotate(18deg); }

.pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(201,167,106,.12), 0 0 18px rgba(201,167,106,.55); }
.pin-a { top: 2.2rem; right: 2.3rem; }.pin-b { bottom: 2.1rem; left: 2.2rem; }
.moon-stamps { position: absolute; right: 4.4rem; top: 5.2rem; display: flex; gap: .55rem; opacity: .58; }
.moon-stamps i { width: 18px; height: 18px; border: 1px solid var(--paper); border-radius: 50%; background: linear-gradient(90deg, var(--paper) 50%, transparent 50%); }

button { color: inherit; font: inherit; }
.label-note, .annotation-strip, .paper-tag {
  border: 1px solid rgba(201,167,106,.38);
  background: rgba(232,224,207,.08);
  color: rgba(232,224,207,.78);
  padding: .8rem 1rem;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(2,8,23,.28);
}
.label-note { position: absolute; right: 3.2rem; bottom: 9vh; max-width: 250px; }
.annotation-strip { align-self: flex-start; margin-top: 3rem; transform: rotate(-2deg); }
.paper-tag { display: block; margin: .75rem 0; background: rgba(232,224,207,.12); }
.label-note:hover, .annotation-strip:hover, .paper-tag:hover { border-color: var(--aurora-green); color: var(--paper); transform: translateY(-4px) rotate(-1deg); }

.ruler { position: absolute; top: 8%; right: 2rem; width: 10px; height: 70%; opacity: .46; background: repeating-linear-gradient(to bottom, var(--gold) 0 1px, transparent 1px 18px); }
.cyanotype { position: relative; width: min(82%, 430px); height: 430px; margin: 4rem 0 0 7%; border-radius: 22px; background: linear-gradient(135deg, rgba(123,92,255,.22), rgba(2,8,23,.42)), radial-gradient(circle at 60% 30%, rgba(122,247,196,.2), transparent 12rem); border: 1px solid rgba(122,247,196,.24); }
.cyanotype span { position: absolute; width: 54px; height: 80px; border: 1px solid rgba(232,224,207,.36); border-radius: 60% 40%; opacity: .5; }
.cyanotype span:nth-child(2){left:46%;top:8%}.cyanotype span:nth-child(3){left:30%;top:24%;transform:rotate(-35deg)}.cyanotype span:nth-child(4){left:55%;top:38%;transform:rotate(28deg)}.cyanotype span:nth-child(5){left:34%;top:55%;transform:rotate(-20deg)}.cyanotype span:nth-child(6){left:58%;top:68%;transform:rotate(34deg)}
.ghost-stem { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: rgba(232,224,207,.48); }

.detached-petal { position: absolute; top: 9rem; right: 16%; width: 68px; height: 94px; border-radius: 62% 38%; background: rgba(184,144,200,.34); filter: blur(.3px); transform: rotate(31deg); box-shadow: 0 18px 42px rgba(2,8,23,.45); }
.note-cluster { margin-top: 2rem; margin-left: auto; max-width: 310px; transform: rotate(1.5deg); }
.bloom-field { position: absolute; inset: 8%; opacity: .76; }
.bloom-petal { left: 50%; top: 50%; }
.b1{transform-origin:-80px 40px;--rot:0deg;--delay:.05s}.b2{transform-origin:-70px 20px;--rot:42deg;--delay:.11s}.b3{transform-origin:-90px 50px;--rot:88deg;--delay:.18s}.b4{transform-origin:-70px 30px;--rot:132deg;--delay:.24s}.b5{transform-origin:-88px 42px;--rot:176deg;--delay:.3s}.b6{transform-origin:-70px 25px;--rot:220deg;--delay:.37s}.b7{transform-origin:-90px 50px;--rot:268deg;--delay:.43s}.b8{transform-origin:-75px 40px;--rot:314deg;--delay:.5s}
.aurora-bloom::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(122,247,196,.26), transparent 18rem), linear-gradient(135deg, rgba(232,224,207,.11), rgba(123,92,255,.08)); }
.envelope { position: relative; margin: auto; max-width: 530px; padding: 4rem 3rem 3rem; color: var(--ink); background: var(--paper); border-radius: 8px 8px 20px 20px; box-shadow: 0 30px 80px rgba(2,8,23,.58); }
.envelope .flap { position: absolute; left: 0; right: 0; top: 0; height: 78px; background: linear-gradient(155deg, rgba(201,167,106,.4), transparent 55%), var(--paper); clip-path: polygon(0 0,100% 0,50% 100%); }
.envelope h2 { color: var(--ink); font-size: clamp(2.4rem, 7vw, 4.5rem); }
.envelope p { position: relative; }
.root-constellation { position: absolute; inset: auto 0 5rem 0; height: 180px; opacity: .58; }
.root-constellation::before { content:""; position:absolute; left:50%; top:0; width:1px; height:150px; background: linear-gradient(var(--aurora-green), transparent); transform: rotate(18deg); }
.root-constellation i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--paper); box-shadow:0 0 14px var(--aurora-green); }
.root-constellation i:nth-child(1){left:43%;top:32%}.root-constellation i:nth-child(2){left:51%;top:46%}.root-constellation i:nth-child(3){left:57%;top:66%}.root-constellation i:nth-child(4){left:39%;top:72%}.root-constellation i:nth-child(5){left:61%;top:24%}.root-constellation i:nth-child(6){left:47%;top:88%}

.revealable { opacity: 0; transform: translateY(38px) scale(.985); transition: opacity .78s ease, transform .78s cubic-bezier(.18,1.1,.36,1); transition-delay: var(--reveal-delay, 0s); }
.revealable.in-view { opacity: 1; transform: translateY(0) scale(1); }
.settle-in { animation: sheetSettle 1.15s cubic-bezier(.18,1.22,.32,1) both; }
.note-popover { position: fixed; z-index: 5; left: 0; top: 0; max-width: 290px; padding: .85rem 1rem; border: 1px solid rgba(122,247,196,.38); border-radius: 14px; background: rgba(2,8,23,.9); color: var(--paper); font: 300 .78rem/1.55 "IBM Plex Mono", monospace; letter-spacing: .06em; opacity: 0; transform: translate(-50%, calc(-100% - 12px)) scale(.95); pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 18px 48px rgba(2,8,23,.7); }
.note-popover.visible { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }

@keyframes auroraDrift { from { transform: translate3d(-5vw, 9vh, 0) rotate(-8deg) scaleX(.8); } to { transform: translate3d(6vw, -8vh, 0) rotate(9deg) scaleX(1.18); } }
@keyframes sheetSettle { 0% { opacity: 0; transform: translateX(-50%) translateY(80px) scale(.94); } 58% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.015); } 100% { opacity: .92; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes petalSettle { 0% { opacity: 0; transform: scale(.55) translateY(42px) rotate(calc(var(--rot) - 14deg)); } 65% { opacity: .98; transform: scale(1.05) translateY(-6px) rotate(calc(var(--rot) + 3deg)); } 100% { opacity: .92; transform: scale(1) translateY(0) rotate(var(--rot)); } }

@media (max-width: 760px) {
  :root { --spine: 92vw; }
  .sheet { min-height: 88vh; padding: 5rem 1.35rem 2rem; transform: none; }
  .copy { margin-left: 0; }
  .label-note { position: relative; right: auto; bottom: auto; margin-top: 2rem; }
  .lupine-stem { opacity: .45; transform: translateX(-42%) scale(.82); }
  .archive-line { left: 1.35rem; }
}