/* CassieBearYup — "Silent Night" (app/Views/creators/cassiebearyup.php).
   Deep indigo night at the top, softening to lavender at the bottom; a
   glowing crescent moon; twinkling stars drawn as box-shadows.
   Motion is transform and opacity only, and stops for reduced motion and
   the site's lite mode (docs/MOTION.md, mobile-performance rules). */

@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-600-italic-latin.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body.cp-theme-cassiebearyup {
  --cs-night: #07051a; --cs-deep: #120c2e; --cs-indigo: #241a52; --cs-violet: #4a3796;
  --cs-purple: #7a62c9; --cs-lav: #b9a5f0; --cs-lilac: #ddd0ff; --cs-mist: #f1ebff;
  --cs-moon: #fff6e2; --cs-heart: #ff9ec7;
  --cs-ink: #f4efff; --cs-ink2: #c9bdf0; --cs-ink3: #9d90c9;
  --cs-glass: rgba(18, 12, 44, .62); --cs-line: rgba(201, 184, 255, .22);
  --scroll-acc: #9d85e6;
  background: var(--cs-night);
}
html:has(> body.cp-theme-cassiebearyup) { --scroll-acc: #9d85e6; }

.cs {
  position: relative;
  overflow-x: clip;
  padding: 0 0 40px;
  color: var(--cs-ink);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600;
  /* The night turns toward dawn as you scroll. */
  background: linear-gradient(180deg, var(--cs-night) 0, var(--cs-deep) 18%, var(--cs-indigo) 42%, #33256b 60%, var(--cs-violet) 76%, #8b74d4 88%, #b39fec 100%);
}
.cs a { color: inherit; text-decoration: none; }

/* ---- the silk (drawn by cassiebearyup.js; the gradient above is the fallback) ---- */
.cs-silk { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100vh; height: 100lvh; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.cs-silk.is-on { opacity: 1; }
.cs.has-silk { background: none; }
/* The moon: huge, soft, fixed behind the page, hovering about while you scroll. */
.cs-bgmoon { position: fixed; z-index: -1; top: 50%; right: -16vw; width: min(118vh, 96vw); margin-top: calc(min(118vh, 96vw) * -.46); pointer-events: none; opacity: .62; }
.cs-bgmoon img { display: block; width: 100%; height: auto; animation: cs-hover 40s ease-in-out infinite; }
@keyframes cs-hover {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  30% { transform: translate(-4vw, 3vh) rotate(2deg); }
  62% { transform: translate(2vw, -3vh) rotate(-1deg); }
}
/* A soft dusk behind the words and behind the moon, so the folds never wash them out. */
.cs.has-silk .cs-hero::before { content: ""; position: absolute; z-index: -1; inset: 6% -4% 0; pointer-events: none; background: radial-gradient(ellipse 34% 46% at 24% 52%, rgba(10, 4, 34, .62), rgba(10, 4, 34, 0) 100%), radial-gradient(ellipse 30% 48% at 72% 52%, rgba(10, 4, 34, .55), rgba(10, 4, 34, 0) 100%); }
@media (max-width: 900px) { .cs.has-silk .cs-hero::before { background: radial-gradient(ellipse 70% 40% at 50% 26%, rgba(10, 4, 34, .6), rgba(10, 4, 34, 0) 100%), radial-gradient(ellipse 70% 30% at 50% 78%, rgba(10, 4, 34, .5), rgba(10, 4, 34, 0) 100%); } }
.cs img { display: block; max-width: 100%; }

/* ---- the sky ---- */
.cs-sky { position: absolute; inset: 0 0 auto; height: 160vh; pointer-events: none; overflow: hidden; }
.cs-stars { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.cs-stars.is-far { opacity: .55; }
.cs-stars.is-mid { opacity: .8; animation: cs-twinkle 5s ease-in-out infinite alternate; }
.cs-stars.is-near { opacity: .9; animation: cs-twinkle 3.6s ease-in-out infinite alternate-reverse; }
@keyframes cs-twinkle { from { opacity: .35; } to { opacity: 1; } }
.cs-shoot { position: absolute; top: 12vh; left: 8vw; width: 160px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 246, 226, 0), #fff6e2); opacity: 0; transform: rotate(-18deg); animation: cs-shoot 11s ease-in 3s infinite; }
@keyframes cs-shoot {
  0%, 82% { opacity: 0; transform: translate(0, 0) rotate(-18deg); }
  85% { opacity: 1; }
  96% { opacity: 0; transform: translate(46vw, 15vh) rotate(-18deg); }
  100% { opacity: 0; transform: translate(46vw, 15vh) rotate(-18deg); }
}

/* ---- hero ---- */
.cs-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px; max-width: 1280px; min-height: min(100vh, 860px); margin: 0 auto; padding: 120px 32px 40px; }
.cs-kick { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cs-lav); }
.cs-name { margin: 0; padding: .06em 0 .1em; text-transform: none; word-break: normal; overflow-wrap: normal; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(50px, 6.4vw, 98px); line-height: .98; letter-spacing: -.01em; color: var(--cs-moon); text-shadow: 0 0 28px rgba(255, 238, 200, .35), 0 0 70px rgba(185, 165, 240, .35); }
.cs-tagline { margin: 14px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(20px, 2.2vw, 27px); color: var(--cs-lilac); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.cs-tags li { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--cs-line); background: rgba(185, 165, 240, .1); font-size: 13px; font-weight: 700; color: var(--cs-ink2); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cs-btn { display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 99px; border: 1px solid var(--cs-line); background: rgba(185, 165, 240, .12); font-size: 15px; font-weight: 700; color: var(--cs-ink); transition: transform .2s, background-color .2s, box-shadow .2s; }
.cs-btn:hover { transform: translateY(-2px); background: rgba(185, 165, 240, .22); }
.cs-btn.is-moon { border-color: transparent; background: linear-gradient(135deg, var(--cs-moon), var(--cs-lilac)); color: #2a1d5c; box-shadow: 0 10px 30px -12px rgba(255, 238, 200, .7); }
.cs-btn.is-moon:hover { box-shadow: 0 14px 36px -10px rgba(255, 238, 200, .9); }
.cs-socials { display: flex; gap: 10px; margin-top: 22px; }
.cs-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--cs-line); color: var(--cs-lilac); transition: color .2s, border-color .2s, transform .2s; }
.cs-socials a:hover { color: var(--cs-moon); border-color: var(--cs-lav); transform: translateY(-2px); }
.cs-socials svg { width: 18px; height: 18px; fill: currentColor; }

/* The moon and Cass beside it. */
.cs-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 700px; justify-self: center; }
.cs-moon-glow { position: absolute; inset: -4% -6% 4%; background: radial-gradient(closest-side, rgba(255, 224, 170, .22), rgba(185, 165, 240, .1) 55%, rgba(185, 165, 240, 0)); animation: cs-breathe 7s ease-in-out infinite; }
@keyframes cs-breathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.cs-tuber { position: absolute; right: 0; bottom: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; animation: cs-float 6s ease-in-out infinite; }
.cs-tuber img { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(7, 5, 26, .6)); }
/* Her frames stop at the waist: let that edge fade into the night. */
.cs-tuber { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
.cs-tuber .is-talk { position: absolute; inset: 0; opacity: 0; }
.cs-tuber.is-talking .is-talk { opacity: 1; }
.cs-tuber.is-talking .is-quiet { opacity: 0; }
@keyframes cs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- moon phases between sections ---- */
.cs-phases { display: flex; justify-content: center; gap: 14px; margin: 26px auto; padding: 0 20px; }
.cs-phases svg { width: 20px; height: 20px; opacity: .35; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 70ms); }
.cs-phases svg.is-wane { scale: -1 1; }
html:not(.cp-js) .cs-phases svg, .cs-phases.is-in svg { opacity: 1; transform: none; }
.cs-ph-dark { fill: rgba(185, 165, 240, .16); }
.cs-ph-lit { fill: var(--cs-moon); }
.cs-phases svg { overflow: visible; transition: opacity .6s ease, transform .6s ease, filter .5s ease; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s; }
.cs-phases svg.is-full { filter: drop-shadow(0 0 6px rgba(255, 230, 180, .85)); }

/* ---- sections ---- */
.cs-sec { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 30px 32px 20px; }
.cs-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cs-title { margin: 0; padding: .06em 0 .08em; text-transform: none; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; color: var(--cs-moon); text-shadow: 0 0 24px rgba(255, 238, 200, .25); }
.cs-more { flex: none; font-size: 14px; font-weight: 700; color: var(--cs-lilac); }
.cs-more:hover { color: var(--cs-moon); }
.cs .cs-row-h { margin: 18px 0 10px; font-family: 'Quicksand', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-ink2); }
.cs-panel { border-radius: 26px; border: 1px solid var(--cs-line); background: var(--cs-glass); box-shadow: 0 20px 50px -30px rgba(7, 5, 26, .9); }
.cs-empty { padding: 22px 26px; color: var(--cs-ink2); line-height: 1.6; }
.cs-empty a { color: var(--cs-moon); text-decoration: underline; text-underline-offset: 3px; }

/* About */
.cs-about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 30px; }
.cs-about-art { position: relative; }
.cs-about-art::before { content: ""; position: absolute; inset: -4% -8% -6%; background: radial-gradient(closest-side, rgba(255, 224, 170, .26), rgba(122, 98, 201, .12) 55%, rgba(122, 98, 201, 0)); }
.cs-smile { position: relative; cursor: pointer; }
.cs-smile img { position: relative; width: 100%; height: auto; }
.cs-smile .is-open { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.cs-smile.is-open .is-open, .cs-smile:hover .is-open { opacity: 1; }
.cs-about-copy { padding: 30px 32px; }
.cs-about-copy p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--cs-ink2); }
.cs-about-copy .cs-kick { margin: 0 0 8px; color: var(--cs-lav); }

/* Small labels sit in moonlit pills, so they read over the moving silk and moon:
   a dark glass fill (no blur — phones) with a gold-to-lilac edge and a faint glow. */
.cs-kick, .cs .cs-row-h, .cs-more {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 7px 12px 7px 14px; border-radius: 99px; border: 1px solid transparent;
  background: linear-gradient(rgba(14, 8, 40, .8), rgba(14, 8, 40, .8)) padding-box,
              linear-gradient(120deg, rgba(255, 224, 170, .75), rgba(185, 165, 240, .45) 45%, rgba(185, 165, 240, .12)) border-box;
  box-shadow: 0 6px 18px -8px rgba(7, 5, 26, .9), 0 0 16px -6px rgba(255, 224, 170, .45);
  color: var(--cs-lilac); line-height: 1.2;
}
.cs-kick, .cs .cs-row-h { letter-spacing: .2em; }
.cs-more { padding: 7px 16px; letter-spacing: .02em; transition: color .2s, box-shadow .2s, transform .2s; }
.cs-more:hover { color: var(--cs-moon); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(7, 5, 26, .9), 0 0 20px -4px rgba(255, 224, 170, .6); }
.cs-follow .cs-more { padding: 0; border: 0; background: none; box-shadow: none; }
.cs-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.cs-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--cs-line); font-size: 14px; font-weight: 700; color: var(--cs-ink); transition: background-color .2s, border-color .2s; }
.cs-links a:hover { background: rgba(185, 165, 240, .16); border-color: var(--cs-lav); }
.cs-links svg { width: 16px; height: 16px; fill: currentColor; }

/* The duo: Cass's violet meets Miss Pookie's pink (her own page's colours). */
.cs-duo { --pk: #ff4fa8; --pk-l: #ffb3d9; --pk-c: #5fe3f2; }
.cs-duo-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px; }
.cs-duo-art { position: relative; display: block; width: 100%; max-width: 540px; justify-self: center; padding: 0; border: 3px solid transparent; border-radius: 34px; cursor: pointer;
  background: linear-gradient(#0b0720, #0b0720) padding-box, linear-gradient(90deg, var(--pk), var(--pk-l) 45%, #c9b6f5 55%, #8f6bea) border-box;
  box-shadow: -18px 20px 60px -26px rgba(255, 79, 168, .8), 18px 20px 60px -26px rgba(143, 107, 234, .9); transform: rotate(-1.5deg); transition: transform .4s cubic-bezier(.19, .84, .26, 1), box-shadow .4s; }
.cs-duo-art:hover { transform: rotate(0deg) scale(1.02); box-shadow: -22px 24px 70px -22px rgba(255, 79, 168, .9), 22px 24px 70px -22px rgba(143, 107, 234, 1); }
.cs-duo-art img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 31px; }
.cs-duo-tag { position: absolute; bottom: 16px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #fff; box-shadow: 0 8px 18px -8px rgba(7, 5, 26, .8); }
.cs-duo-tag.is-pookie { left: 16px; background: linear-gradient(135deg, var(--pk), #ff7fc0); transform: rotate(-4deg); }
.cs-duo-tag.is-cass { right: 16px; background: linear-gradient(135deg, #8f6bea, #6a4fc4); color: var(--cs-moon); transform: rotate(4deg); }
/* Hearts, moons and sparkles drifting up from the seam between them. */
.cs-duo-float { position: absolute; left: 50%; bottom: 8%; width: 0; height: 0; pointer-events: none; }
.cs-duo-float i, .cs-duo-pop { position: absolute; left: 0; top: 0; font-style: normal; font-size: 22px; line-height: 1; opacity: 0; text-shadow: 0 0 10px currentColor; }
.cs-duo-float i { animation: cs-rise 6s ease-in infinite; }
.cs-duo-float i:nth-child(odd) { color: var(--pk-l); }
.cs-duo-float i:nth-child(even) { color: #f2cc86; }
.cs-duo-float i:nth-child(1) { --x: -26px; animation-delay: 0s; }
.cs-duo-float i:nth-child(2) { --x: 18px; animation-delay: 1s; font-size: 18px; }
.cs-duo-float i:nth-child(3) { --x: -8px; animation-delay: 2s; font-size: 16px; color: #fff; }
.cs-duo-float i:nth-child(4) { --x: 30px; animation-delay: 3s; font-size: 26px; }
.cs-duo-float i:nth-child(5) { --x: -34px; animation-delay: 4s; }
.cs-duo-float i:nth-child(6) { --x: 6px; animation-delay: 5s; font-size: 18px; }
@keyframes cs-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), -360px) scale(1.15) rotate(12deg); }
}
.cs-duo-pop { animation: cs-pop 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes cs-pop {
  0% { opacity: 1; transform: translate(0, 0) scale(.4); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--r)); }
}
.cs-duo .cs-title em { color: var(--pk-l); text-shadow: 0 0 22px rgba(255, 79, 168, .45); }
.cs-amp { font-size: .7em; color: #f2cc86; }
.cs-duo-copy > p:not(.cs-kick) { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--cs-ink2); }
.cs-duo-pair { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cs-duo-pair li:not(.cs-duo-heart) { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 99px; border: 1px solid var(--cs-line); background: rgba(14, 8, 40, .7); }
.cs-duo-pair b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; }
.cs-duo-pair .is-cass b { background: linear-gradient(135deg, #8f6bea, #6a4fc4); color: var(--cs-moon); }
.cs-duo-pair .is-pookie b { background: linear-gradient(135deg, var(--pk), #ff7fc0); color: #fff; }
.cs-duo-pair span { font-size: 12px; color: var(--cs-ink3); line-height: 1.3; }
.cs-duo-pair strong { display: block; font-size: 15px; color: var(--cs-ink); }
.cs-duo-heart { font-size: 22px; color: var(--pk-l); animation: cs-beat 1.6s ease-in-out infinite; text-shadow: 0 0 12px rgba(255, 79, 168, .7); }
@keyframes cs-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
.cs-btn.is-pookie { border-color: transparent; background: linear-gradient(135deg, var(--pk), #ff7fc0); color: #fff; box-shadow: 0 10px 30px -12px rgba(255, 79, 168, .8); }
.cs-btn.is-pookie:hover { background: linear-gradient(135deg, #ff6bb6, #ff9ccf); box-shadow: 0 14px 34px -10px rgba(255, 79, 168, .95); }

/* Video cards in moonlit glass. */
.cs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 32%, 420px); gap: 20px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.cs-rail.is-tall { grid-auto-columns: clamp(200px, 19%, 240px); }
.cs-rail::-webkit-scrollbar { height: 8px; }
.cs-rail::-webkit-scrollbar-thumb { background: rgba(185, 165, 240, .35); border-radius: 9px; }
.cs-card { scroll-snap-align: start; display: grid; align-content: start; gap: 10px; margin: 0; }
.cs-card-thumb { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--cs-line); background: var(--cs-glass); aspect-ratio: 16 / 9; box-shadow: 0 16px 34px -22px rgba(7, 5, 26, .9); transition: transform .25s ease, box-shadow .25s ease; }
.cs-card.is-tall .cs-card-thumb { aspect-ratio: 9 / 16; }
.cs-card-thumb > a, .cs-card-thumb img, .cs-card-thumb iframe { display: block; width: 100%; height: 100%; }
.cs-card-thumb img { object-fit: cover; }
.cs-card:hover .cs-card-thumb { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 238, 200, .35), 0 20px 40px -20px rgba(255, 238, 200, .35); }
.cs-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255, 246, 226, .92); color: #2a1d5c; font-size: 16px; box-shadow: 0 0 24px rgba(255, 238, 200, .5); }
.cs-chip { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgba(7, 5, 26, .7); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-lilac); }
.cs .cs-card-title { margin: 0; font-family: 'Quicksand', system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--cs-ink); text-shadow: 0 1px 2px rgba(7, 5, 26, .9), 0 0 12px rgba(7, 5, 26, .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* TikTok follow card, until she picks some. */
.cs-follow { display: flex; align-items: center; gap: 16px; padding: 20px 24px; max-width: 520px; transition: border-color .2s, transform .2s; }
.cs-follow:hover { border-color: var(--cs-lav); transform: translateY(-2px); }
.cs-follow-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(185, 165, 240, .14); }
.cs-follow-ico svg { width: 22px; height: 22px; fill: var(--cs-moon); }
.cs-follow b { display: block; font-size: 17px; }
.cs-follow small { display: block; margin-top: 2px; font-size: 13px; color: var(--cs-ink3); }
.cs-follow .cs-more { margin-left: auto; font-size: 20px; }

/* Gallery — hers, from the Dash. Big portrait tiles: a few pictures should
   fill the row, not huddle at one end. Tap one for the moonlit viewer. */
.cs-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.cs-gallery li { max-width: 520px; }
.cs-gallery a { position: relative; display: block; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; border: 1px solid transparent;
  background: linear-gradient(var(--cs-deep), var(--cs-deep)) padding-box, linear-gradient(140deg, rgba(255, 224, 170, .7), rgba(185, 165, 240, .4) 45%, rgba(185, 165, 240, .1)) border-box;
  box-shadow: 0 24px 50px -26px rgba(7, 5, 26, .95); transition: transform .3s ease, box-shadow .3s ease; cursor: zoom-in; }
.cs-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cs-gallery a::after { content: "☾"; position: absolute; right: 14px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(14, 8, 40, .78); color: var(--cs-moon); font-size: 18px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.cs-gallery a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 224, 170, .35), 0 28px 60px -24px rgba(255, 224, 170, .35); }
.cs-gallery a:hover img { transform: scale(1.04); }
.cs-gallery a:hover::after, .cs-gallery a:focus-visible::after { opacity: 1; transform: none; }

/* The viewer for her gallery (cassiebearyup.js) and the shared video player
   (creator-media.js .cp-player), both in her night. */
body.cp-theme-cassiebearyup .cp-player, .cs-zoom { background: radial-gradient(ellipse at 50% 42%, rgba(74, 55, 150, .5), rgba(7, 5, 26, .95) 72%); }
body.cp-theme-cassiebearyup .cp-player-frame, .cs-zoom-img { border: 1px solid transparent; border-radius: 24px;
  background: linear-gradient(#0b0720, #0b0720) padding-box, linear-gradient(140deg, rgba(255, 224, 170, .8), rgba(185, 165, 240, .5) 45%, rgba(185, 165, 240, .15)) border-box;
  box-shadow: 0 0 70px -14px rgba(255, 224, 170, .35), 0 34px 80px rgba(7, 5, 26, .85); }
body.cp-theme-cassiebearyup .cp-player-caption, .cs-zoom-cap { margin-top: 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--cs-moon); text-shadow: 0 0 18px rgba(255, 238, 200, .3); }
body.cp-theme-cassiebearyup .cp-player-close, .cs-zoom-btn { border: 1px solid transparent; color: var(--cs-moon);
  background: linear-gradient(rgba(14, 8, 40, .85), rgba(14, 8, 40, .85)) padding-box, linear-gradient(120deg, rgba(255, 224, 170, .8), rgba(185, 165, 240, .4)) border-box;
  box-shadow: 0 0 18px -4px rgba(255, 224, 170, .5); }
body.cp-theme-cassiebearyup .cp-player-close:hover, .cs-zoom-btn:hover { transform: scale(1.06) rotate(90deg); box-shadow: 0 0 24px -2px rgba(255, 224, 170, .7); }
.cs-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vmin, 48px); opacity: 0; transition: opacity .3s ease; }
.cs-zoom[hidden] { display: none; }
.cs-zoom.is-open { opacity: 1; }
.cs-zoom figure { margin: 0; display: grid; justify-items: center; transform: translateY(14px) scale(.96); transition: transform .4s cubic-bezier(.19, .84, .26, 1); }
.cs-zoom.is-open figure { transform: none; }
.cs-zoom-img { display: block; max-width: min(92vw, 1100px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.cs-zoom-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; transition: transform .2s, box-shadow .2s; }
.cs-zoom-btn.is-close { top: 18px; right: 20px; font-size: 28px; }
.cs-zoom-btn.is-prev { left: 18px; top: 50%; margin-top: -24px; }
.cs-zoom-btn.is-next { right: 18px; top: 50%; margin-top: -24px; }
.cs-zoom-btn.is-prev:hover, .cs-zoom-btn.is-next:hover { transform: scale(1.08); }
.cs-zoom-btn[hidden] { display: none; }

/* Join DRXP */
.cs-join { margin-top: 30px; }
.cs-join-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding: 50px 48px;
  border: 1px solid transparent; background: linear-gradient(135deg, rgba(36, 26, 82, .92), rgba(14, 8, 40, .92)) padding-box, linear-gradient(140deg, rgba(255, 224, 170, .75), rgba(185, 165, 240, .4) 40%, rgba(185, 165, 240, .1)) border-box; }
.cs-join-card::before { content: ""; position: absolute; right: -90px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 170, .22), rgba(255, 224, 170, 0)); pointer-events: none; }
.cs-join-copy { position: relative; }
.cs-join .cs-title { margin: 14px 0 16px; }
.cs-join .cs-title em { color: #f2cc86; }
.cs-join-copy > p:not(.cs-kick) { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.7; color: var(--cs-ink2); }
.cs-nums { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cs-nums li { padding: 20px; border-radius: 20px; border: 1px solid var(--cs-line); background: rgba(185, 165, 240, .08); }
.cs-nums b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 38px; line-height: 1; color: var(--cs-moon); text-shadow: 0 0 18px rgba(255, 238, 200, .3); }
.cs-nums span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--cs-ink3); }

/* Shop */
.cs-shop { margin-top: 4px; }

/* Moonset */
.cs-end { border: 0; background: none; position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; margin: 40px auto 0; padding: 20px 20px 10px; text-align: center; }
.cs-end-moon { width: 96px; height: auto; fill: var(--cs-moon); filter: drop-shadow(0 0 18px rgba(255, 246, 226, .7)); }
.cs-goodnight { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 30px; color: var(--cs-moon); text-shadow: 0 0 18px rgba(7, 5, 26, .8); }
.cs-credits { margin: 0; font-size: 13px; font-weight: 700; color: var(--cs-lilac); text-shadow: 0 0 12px rgba(7, 5, 26, .8); }
.cs-credits a { text-decoration: underline; text-underline-offset: 3px; }

/* The menu bar, in the night's colours. */
body.cp-theme-cassiebearyup .cpnav-in { background: rgba(18, 12, 44, .72); border-color: rgba(201, 184, 255, .2); box-shadow: 0 14px 34px -20px rgba(7, 5, 26, .9); }
body.cp-theme-cassiebearyup .cpnav-who { color: var(--cs-moon); border-left-color: rgba(201, 184, 255, .3); }
body.cp-theme-cassiebearyup .cpnav-av { border-color: var(--cs-lav); box-shadow: 0 0 14px rgba(255, 238, 200, .4); }
body.cp-theme-cassiebearyup .cpnav-links a { color: var(--cs-ink2); }
body.cp-theme-cassiebearyup .cpnav-links a:hover { color: var(--cs-moon); background: rgba(185, 165, 240, .14); }
body.cp-theme-cassiebearyup :is(.cpnav-burger, .cpnav-account) { background: rgba(185, 165, 240, .14); color: var(--cs-ink); }
body.cp-theme-cassiebearyup .cpnav-links a[aria-current="true"] { background: linear-gradient(135deg, #8f6bea, #6a4fc4); color: var(--cs-moon); box-shadow: 0 6px 16px -8px #8f6bea, inset 0 0 0 1px rgba(255, 224, 170, .35); }
body.cp-theme-cassiebearyup .cpnav-cart { background: linear-gradient(135deg, #8f6bea, #6a4fc4); color: var(--cs-moon); box-shadow: 0 8px 18px -10px #8f6bea, inset 0 0 0 1px rgba(255, 224, 170, .3); transition: background .25s, color .25s, box-shadow .25s, transform .2s; }
body.cp-theme-cassiebearyup .cpnav-cart:hover { background: linear-gradient(135deg, var(--cs-moon), #f2cc86); color: #2a1d5c; box-shadow: 0 0 22px -4px rgba(255, 224, 170, .75); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-cassiebearyup .cpnav-in { background: rgba(18, 12, 44, .96); } }
.perf-lite body.cp-theme-cassiebearyup .cpnav-in, body.cp-theme-cassiebearyup.perf-lite .cpnav-in { background: rgba(18, 12, 44, .96); }

/* ---- small screens ---- */
@media (max-width: 900px) {
  .cs-hero { grid-template-columns: 1fr; padding: 108px 20px 20px; min-height: 0; text-align: center; }
  .cs-actions, .cs-socials, .cs-tags { justify-content: center; }
  .cs-kick { letter-spacing: .12em; font-size: 10.5px; padding: 6px 11px 6px 12px; }
  .cs-stage { max-width: 480px; }
  .cs-bgmoon { top: 56%; right: -26vw; width: 120vw; margin-top: -55vw; opacity: .6; }
  .cs-about { grid-template-columns: 1fr; }
  .cs-about-art { max-width: 360px; margin: 0 auto; }
  .cs-sec { padding: 24px 20px 16px; }
  .cs-about-copy { padding: 24px 22px; }
  .cs-rail { grid-auto-columns: 88%; }
  .cs-rail.is-tall { grid-auto-columns: 58%; }
  .cs-gallery { gap: 16px; }
  .cs-gallery li { max-width: none; }
  .cs-duo-card { grid-template-columns: 1fr; gap: 28px; }
  .cs-duo-pair { justify-content: center; }
  .cs-duo-copy { text-align: center; }
  .cs-duo .cs-actions { justify-content: center; }
  .cs-join-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .cs-zoom-btn.is-prev, .cs-zoom-btn.is-next { top: auto; bottom: 22px; margin-top: 0; }
}

/* ---- calmer when asked ---- */
@media (prefers-reduced-motion: reduce) {
  .cs-stars, .cs-shoot, .cs-moon-glow, .cs-bgmoon img, .cs-tuber { animation: none; }
  .cs-zoom, .cs-zoom figure { transition: none; }
  .cs-duo-float, .cs-duo-heart { animation: none; }
  .cs-duo-float { display: none; }
  .cs-shoot { display: none; }
}
.perf-lite .cs-stars, .perf-lite .cs-shoot, .perf-lite .cs-moon-glow, .perf-lite .cs-bgmoon img, .perf-lite .cs-tuber { animation: none; }
.perf-lite .cs-shoot { display: none; }
.perf-lite .cs-duo-float { display: none; }
.perf-lite .cs-duo-heart { animation: none; }
@media (hover: none) { .cs-tuber img { filter: none; } }