:root {
  /* Compliance vocabulary: Inter** from Google Fonts only for tiny control labels when clarity is needed. Playfair Display** from Google Fonts for the large “karmabadge.com” wordmark. Playfair-style type sits large and low in the mist. */
  --moon-vellum: #F6F1E8;
  --frosted-glass: #DDE9EF;
  --pearl-lilac: #C9BEEA;
  --karma-rose: #D9A6A1;
  --soft-sage: #AFC8B2;
  --graphite-ink: #2F3038;
  --deep-dusk: #171821;
  --glass: rgba(221,233,239,.58);
  --vellum: rgba(246,241,232,.76);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--graphite-ink);
  background: radial-gradient(circle at 50% 12%, rgba(201,190,234,.45), transparent 34%), linear-gradient(135deg, var(--moon-vellum), var(--frosted-glass) 52%, var(--moon-vellum));
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .13;
  background-image: radial-gradient(var(--graphite-ink) .55px, transparent .55px), radial-gradient(var(--deep-dusk) .35px, transparent .35px);
  background-size: 5px 5px, 9px 9px;
  animation: grainShiver 4s steps(3) infinite;
  mix-blend-mode: multiply;
}

.design-vocabulary {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.dream-ledger { position: relative; }
.act { min-height: 100vh; position: relative; overflow: hidden; }

.karma-lantern {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(circle, rgba(246,241,232,.84) 0%, rgba(221,233,239,.62) 28%, rgba(201,190,234,.31) 54%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(2px);
}

.frost-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 58;
}

.trail-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(221,233,239,.75);
  box-shadow: 0 0 16px rgba(201,190,234,.7);
  animation: trailFade 1.4s ease-out forwards;
}

.thread-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.thread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(47,48,56,.42);
  background: rgba(246,241,232,.5);
  box-shadow: 0 0 0 5px rgba(221,233,239,.18);
}

.thread-dot.is-active { background: var(--karma-rose); box-shadow: 0 0 0 9px rgba(217,166,161,.18); }

.hero-act { display: grid; place-items: end center; padding: 7vh 6vw 10vh; }
.paper-grain, .vellum-mist, .foreground-fog { position: absolute; inset: 0; pointer-events: none; }
.paper-grain { background: radial-gradient(circle at 20% 22%, rgba(175,200,178,.2), transparent 25%), radial-gradient(circle at 82% 20%, rgba(217,166,161,.24), transparent 24%), radial-gradient(circle at 54% 72%, rgba(221,233,239,.7), transparent 35%); }
.vellum-mist { background: linear-gradient(90deg, rgba(246,241,232,.35), transparent 18%, rgba(221,233,239,.28) 40%, transparent 62%, rgba(246,241,232,.38)), repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.16) 71px 73px); filter: blur(.4px); }
.foreground-fog { z-index: 12; background: linear-gradient(0deg, rgba(246,241,232,.86), transparent 42%), radial-gradient(circle at 50% 84%, rgba(221,233,239,.72), transparent 30%); }

.orbit-field { position: absolute; inset: 5vh 3vw; width: 94vw; height: 90vh; z-index: 2; opacity: .34; fill: none; stroke: var(--graphite-ink); stroke-width: 1; stroke-dasharray: 7 13; filter: blur(.2px); animation: orbitBreathe 18s ease-in-out infinite; }

.badge-cloud { position: absolute; inset: 0; z-index: 8; }
.badge {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 98px;
  height: 98px;
  transform: translate(-50%, -50%) rotate(var(--r));
  border: 1.4px solid rgba(47,48,56,.55);
  background: rgba(221,233,239,.5);
  box-shadow: inset 0 0 24px rgba(246,241,232,.8), 0 20px 42px rgba(47,48,56,.1);
  filter: blur(var(--blur, 0));
  animation: floatBadge calc(14s + var(--d, 0s)) ease-in-out infinite;
  animation-delay: var(--delay);
  transition: transform .45s ease-out, filter .45s ease-out, opacity .45s ease-out;
}
.badge::before, .badge::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(47,48,56,.38); border-radius: inherit; }
.badge::after { inset: 31px; border-style: solid; opacity: .45; }
.badge span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-7deg); font-family: "Caveat", cursive; font-size: 21px; color: rgba(47,48,56,.76); }
.seal, .hollow { border-radius: 45% 55% 48% 52%; }
.moth { clip-path: polygon(50% 8%, 85% 28%, 74% 74%, 50% 61%, 25% 74%, 14% 28%); }
.moon { border-radius: 50%; box-shadow: inset 18px 0 0 rgba(246,241,232,.72), 0 20px 42px rgba(47,48,56,.09); }
.key { border-radius: 50% 50% 44% 44%; }
.key::after { inset: auto 44px -30px auto; width: 11px; height: 42px; border: 1px solid rgba(47,48,56,.44); border-radius: 9px; }
.cloud { border-radius: 46% 54% 44% 56% / 60% 46% 54% 40%; }
.scale { border-radius: 50%; }
.scale::after { content: "⚖"; display: grid; place-items: center; inset: 22px; border: 0; font-family: "Cormorant Garamond", serif; font-size: 26px; }
.tear { border-radius: 60% 50% 62% 48%; transform: translate(-50%, -50%) rotate(calc(var(--r) + 45deg)); }
.ribbon { border-radius: 18px; }
.feather { border-radius: 74% 10% 74% 10%; }
.rose { background: rgba(217,166,161,.34); }
.sage { background: rgba(175,200,178,.34); }
.lilac { background: rgba(201,190,234,.34); }
.frost { background: rgba(221,233,239,.58); }
.depth-far { opacity: .48; --blur: 1.4px; width: 82px; height: 82px; }
.depth-mid { opacity: .68; --blur: .35px; }
.depth-near { opacity: .9; width: 118px; height: 118px; }

.hidden-marks span { position: absolute; left: var(--mx); top: var(--my); z-index: 5; font-family: "Caveat", cursive; font-size: 28px; color: rgba(47,48,56,.2); opacity: 0; filter: blur(5px); transition: opacity .8s, filter .8s; }
.lantern-near .hidden-marks span { opacity: .65; filter: blur(.3px); }

.hero-text { position: relative; z-index: 15; width: min(1120px, 92vw); text-align: center; }
.act-kicker { margin: 0 0 18px; font-family: "Inter", sans-serif; text-transform: uppercase; letter-spacing: .28em; font-size: 11px; color: rgba(47,48,56,.58); }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--graphite-ink); }
h1 { margin: 0; font-size: clamp(4.2rem, 13.8vw, 13.5rem); line-height: .82; letter-spacing: -.075em; text-shadow: 0 2px 0 rgba(246,241,232,.5), 0 24px 60px rgba(47,48,56,.16); filter: blur(.2px); }
h1 em { font-style: italic; display: inline-block; transition: filter .55s ease, transform .55s ease; }
.karma-blur h1 em { filter: blur(3px); transform: translateY(-4px); }
.hero-poem { max-width: 720px; margin: 34px auto 0; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.25; color: rgba(47,48,56,.73); }

.ledger-act { min-height: 120vh; padding: 18vh 8vw 12vh; display: flex; align-items: center; background: radial-gradient(circle at 20% 15%, rgba(201,190,234,.3), transparent 30%), linear-gradient(180deg, rgba(246,241,232,.5), rgba(221,233,239,.42)); }
.ledger-panel { position: relative; width: min(980px, 86vw); margin: 0 auto; padding: clamp(34px, 6vw, 82px); border: 1px solid rgba(47,48,56,.18); background: linear-gradient(135deg, rgba(246,241,232,.72), rgba(221,233,239,.48)); backdrop-filter: blur(12px); box-shadow: 0 32px 90px rgba(47,48,56,.09); }
.ledger-panel::before, .ledger-panel::after { content: ""; position: absolute; left: -18px; right: -18px; height: 26px; background: linear-gradient(90deg, transparent, rgba(246,241,232,.82), transparent); filter: blur(.2px); }
.ledger-panel::before { top: -14px; clip-path: polygon(0 50%, 8% 20%, 18% 58%, 30% 28%, 41% 62%, 57% 25%, 72% 60%, 88% 22%, 100% 50%, 100% 100%, 0 100%); }
.ledger-panel::after { bottom: -14px; clip-path: polygon(0 0,100% 0,100% 50%,90% 78%,80% 44%,66% 78%,50% 48%,36% 80%,20% 42%,8% 76%,0 50%); }
.ledger-panel h2, .return-copy h2 { margin: 0; font-size: clamp(3.1rem, 6.4vw, 7rem); line-height: .92; letter-spacing: -.055em; }
.ledger-intro, .return-copy p:not(.act-kicker) { max-width: 680px; font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1.32; color: rgba(47,48,56,.72); }
.deed-strips { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 22px; margin-top: 54px; transform: translateX(var(--ledger-shift, 0)); transition: transform .2s linear; }
.deed-strip { min-height: 148px; padding: 22px 24px; background: rgba(246,241,232,.68); border: 1px solid rgba(47,48,56,.14); box-shadow: 0 16px 36px rgba(47,48,56,.08); clip-path: polygon(0 8%, 9% 0, 23% 5%, 39% 0, 56% 7%, 72% 0, 88% 6%, 100% 1%, 98% 100%, 82% 94%, 64% 100%, 50% 94%, 33% 100%, 14% 93%, 0 98%); transform: rotate(var(--strip-r, -1deg)); }
.deed-strip:nth-child(even) { --strip-r: 1.8deg; background: rgba(221,233,239,.55); }
.deed-strip:nth-child(3n) { --strip-r: -2.4deg; background: rgba(175,200,178,.28); }
.deed-strip span { display: block; font-family: "Caveat", cursive; font-size: 31px; line-height: .98; }
.deed-strip small { display: block; margin-top: 18px; font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(47,48,56,.48); }
.ledger-badges .mini-badge { position: absolute; font-size: 54px; color: rgba(47,48,56,.22); animation: floatBadge 17s ease-in-out infinite; }
.mini-badge:nth-child(1) { left: 12%; top: 18%; }.mini-badge:nth-child(2) { right: 14%; top: 30%; animation-delay: -6s; }.mini-badge:nth-child(3) { left: 22%; bottom: 14%; animation-delay: -9s; }.mini-badge:nth-child(4) { right: 24%; bottom: 18%; animation-delay: -13s; }

.return-act { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; padding: 12vh 8vw; background: radial-gradient(circle at 68% 48%, rgba(217,166,161,.28), transparent 28%), radial-gradient(circle at 36% 24%, rgba(201,190,234,.3), transparent 34%), linear-gradient(180deg, rgba(221,233,239,.34), rgba(246,241,232,.88)); }
.return-copy { position: relative; z-index: 2; }
.final-seal { position: relative; justify-self: center; width: min(460px, 72vw); aspect-ratio: 1; display: grid; place-items: center; }
.seal-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(47,48,56,.42); box-shadow: inset 0 0 55px rgba(221,233,239,.7), 0 26px 80px rgba(47,48,56,.12); animation: sealPulse 8s ease-in-out infinite; }
.ring-one { inset: 0; border-style: dashed; background: rgba(221,233,239,.3); }
.ring-two { inset: 11%; border-color: rgba(217,166,161,.6); animation-delay: -3s; }
.seal-center { width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(246,241,232,.82), rgba(201,190,234,.34)); border: 1px solid rgba(47,48,56,.25); font-family: "Playfair Display", serif; }
.seal-center span { font-family: "Caveat", cursive; font-size: 33px; color: rgba(47,48,56,.56); }
.seal-center strong { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .78; letter-spacing: -.06em; }
.fragment { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(217,166,161,.5); border: 1px solid rgba(47,48,56,.24); animation: fragmentGather 9s ease-in-out infinite; }
.f1 { left: 4%; top: 18%; }.f2 { right: 5%; top: 28%; animation-delay: -2s; background: rgba(175,200,178,.5); }.f3 { left: 19%; bottom: 5%; animation-delay: -4s; background: rgba(201,190,234,.5); }.f4 { right: 24%; bottom: 3%; animation-delay: -6s; }

@keyframes grainShiver { 0%,100% { transform: translate(0,0); } 33% { transform: translate(1px,-1px); } 66% { transform: translate(-1px,1px); } }
@keyframes orbitBreathe { 0%,100% { transform: scale(1) rotate(0deg); opacity: .28; } 50% { transform: scale(1.035) rotate(.5deg); opacity: .45; } }
@keyframes floatBadge { 0%,100% { margin-top: 0; margin-left: 0; } 35% { margin-top: -22px; margin-left: 13px; } 70% { margin-top: 12px; margin-left: -15px; } }
@keyframes trailFade { to { opacity: 0; transform: scale(2.8); } }
@keyframes sealPulse { 0%,100% { transform: scale(.98) rotate(0deg); filter: blur(.2px); } 50% { transform: scale(1.04) rotate(1.2deg); filter: blur(0); } }
@keyframes fragmentGather { 0%,100% { transform: translate(0,0) rotate(0); opacity: .45; } 50% { transform: translate(var(--gx, 20px), var(--gy, -18px)) rotate(18deg); opacity: .9; } }

@media (max-width: 820px) {
  body { cursor: auto; }
  .return-act { grid-template-columns: 1fr; }
  .deed-strips { grid-template-columns: 1fr; transform: none; }
  .badge { width: 76px; height: 76px; }
  .thread-nav { right: 12px; }
}