/* =============================================================
   SnowFlakeBunnie — a deep winter night.

   She is drawn almost entirely in white and the palest blue. Put
   that on a light page and she disappears; put it on a midnight
   sky and every line of her reads on its own, with no border or
   drop shadow helping. So the page is the contrast, and she is the
   only bright thing on it.

   The colours are still hers, taken off the art: the periwinkle of
   her dress, the ice blue of her hair, the near-white of her
   blouse, and the soft pink from her ears and her blush. The night
   is the one thing here that is not — it is what makes the rest
   of it visible.

   Type is round on purpose. Sniglet has almost no straight edges
   and Quicksand's terminals are all circles, which is the closest
   a font gets to the squish of her art.
   ============================================================= */

@font-face { font-family: 'Sniglet'; src: url('/assets/fonts/sniglet-800-latin.woff2') format('woff2'); font-weight: 800; 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-snowflakebunnie {
  --sb-night:  #060B1E;   /* deepest, behind everything */
  --sb-deep:   #0D1533;   /* the sections */
  --sb-dusk:   #18234C;   /* raised surfaces */
  --sb-line:   #2A3767;
  --sb-peri:   #A9B6E8;   /* her dress */
  --sb-ice:    #CFE3FA;   /* her hair */
  --sb-frost:  #EDF4FF;   /* her blouse — the body text colour */
  --sb-blush:  #F6C7D4;   /* her ears, her blush */
  --sb-mint:   #BFEDE4;   /* the stickers on her card */

  --sb-round: 'Sniglet', 'Nunito', system-ui, sans-serif;
  --sb-soft:  'Quicksand', 'Nunito', system-ui, sans-serif;

  background: var(--sb-night);
  color: var(--sb-frost);
}

body.cp-theme-snowflakebunnie .cp {
  --bg: var(--sb-night);
  --bg2: var(--sb-deep);
  --panel: var(--sb-dusk);
  --tx: var(--sb-frost);
  --tx2: #BBC8F0;
  --tx3: #93A2D2;
  --line: var(--sb-line);
  --acc: var(--sb-peri);
  --head: var(--sb-round);
  --body: var(--sb-soft);
  background: none;   /* the night layer below shows through */
  color: var(--sb-frost);
  font-family: var(--sb-soft);
  overflow-x: clip;
}

.sb h1, .sb h2, .sb h3 { font-family: var(--sb-round); letter-spacing: 0; }

/* ---------------------------------------------------------- the night */
/* Fixed behind the whole page. The snow canvas sits in here, so it is
   painted once for the document rather than per section. */
.sb-night {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, #17224E 0%, transparent 62%),
    linear-gradient(180deg, #060B1E 0%, #0D1533 40%, #16204A 74%, #22305F 100%);
}
/* The light she is stood in: one cold moon high behind her, one warm-ish
   bloom low down so the foot of the page lifts toward the clouds. */
/* No filter here: these are radial-gradients, which are already soft to
   their edge. Blurring them added nothing visible and gave the compositor
   two viewport-sized surfaces to re-raster on every frame. */
.sb-glow { position: absolute; border-radius: 50%; }
.sb-glow--a {
  top: -14vh; right: 4%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(169, 182, 232, .26), transparent 66%);
}
.sb-glow--b {
  bottom: -18vh; left: -8%; width: 70vw; height: 50vw; max-width: 900px; max-height: 620px;
  background: radial-gradient(circle, rgba(246, 199, 212, .14), transparent 68%);
}
.sb-snow { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A few big flakes over the canvas field, as glyphs. They fall slowly
   through one viewport height and repeat — the canvas is the weather, these
   are the ones you actually notice. */
.sb-flakes { position: absolute; inset: 0; overflow: hidden; }
.sb-flakes b {
  position: absolute; left: var(--x); top: var(--y);
  font-size: var(--s); line-height: 1; color: rgba(237, 244, 255, .5);
  animation: sb-drift var(--t) linear var(--d) infinite;
  will-change: transform;
}
@keyframes sb-drift {
  from { transform: translate3d(0, -20vh, 0) rotate(0deg); }
  to   { transform: translate3d(22px, 120vh, 0) rotate(160deg); }
}

.sb > section { position: relative; z-index: 1; }

/* ----------------------------------------------------------- the fall */
/* Fixed, so she stays with you the whole way down. The script writes
   translate/rotate/opacity only; everything about where she sits lives
   here, so a change of size is a stylesheet change and not a JS one. */
.sb-fall {
  /* z-index 0, the same layer as the night and after it in the DOM, so she
     passes BEHIND every section. Over the top she covered whatever heading
     she happened to be level with; behind, she falls through the gaps and
     the frosted cards, and no text ever has to compete with her. */
  position: fixed; z-index: 0; top: 30vh; left: 50%;
  width: 270px; margin-left: -135px;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
  /* No transition on opacity: the script writes it every frame, and a
     transition on a per-frame value only ever chases it. */
  /* Depth of field. She is a background layer and the copy is in front of
     her, so she is focused like one — a hair of blur and a little off full
     strength. Crisp and solid she was legible but the heading she happened
     to be behind was not, and this is the honest fix rather than putting a
     shadow under every line of text. */
  filter: blur(2px);
}
.sb-fall img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------- the bunny */
/* Parked off the edge it came from and slid in. The script sets left/right
   and top; --ox is how far off its own edge it currently sits, and --fx is
   -1 when it should face the other way. */
.sb-bunny {
  position: fixed; z-index: 3;
  width: 120px; padding: 0; border: 0; background: none; cursor: pointer;
  translate: var(--ox, 0) 0;
  scale: var(--fx, 1) 1;
  transition: translate .8s cubic-bezier(.22, 1.4, .36, 1), scale .25s ease;
  filter: drop-shadow(0 10px 18px rgba(6, 11, 30, .5));
  -webkit-tap-highlight-color: transparent;
}
.sb-bunny img { display: block; width: 100%; height: auto; pointer-events: none; }
.sb-bunny:focus-visible { outline: 3px solid var(--sb-blush); outline-offset: 6px; border-radius: 12px; }
/* Caught: one squash-and-stretch hop, then the script hides it. */
.sb-bunny.is-caught { animation: sb-hop .5s ease; }
@keyframes sb-hop {
  0%   { scale: var(--fx, 1) 1; }
  30%  { scale: calc(var(--fx, 1) * 1.16) .84; }
  60%  { scale: calc(var(--fx, 1) * .9) 1.14; }
  100% { scale: var(--fx, 1) 1; }
}
.sb-score {
  position: fixed; z-index: 3; right: 18px; bottom: 18px; margin: 0;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(24, 35, 76, .82); border: 2px solid var(--sb-line);
  color: var(--sb-ice); font-family: var(--sb-soft); font-weight: 700; font-size: .84rem;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ sections */
.sb-sec { padding: 96px 0; }
.sb-kick, .sb-kicker {
  font-family: var(--sb-soft); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sb-peri); margin: 0 0 10px;
}
/* The kaomoji at the end of her tagline, out of the small caps: as she
   typed it, at a size where its ears and eyes read. */
.sb-kicker .sb-face { display: inline-block; text-transform: none; letter-spacing: 0; font-size: 1.3em; line-height: 1; vertical-align: -.08em; color: var(--sb-ice, #dfe9ff); white-space: nowrap; }
.sb-title { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0 0 18px; color: var(--sb-frost); }
.sb-title span { color: var(--sb-blush); }
.sb-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; }
.sb-note { font-size: .88rem; color: var(--tx2); font-weight: 600; }

/* --------------------------------------------------------------- hero */
.sb-hero { position: relative; padding: 40px 0 70px; min-height: min(100svh, 860px); display: flex; flex-direction: column; justify-content: center; }
.sb-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; gap: 30px; }
.sb-hero-copy { max-width: 560px; }
.sb-name {
  font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: .94; margin: 0 0 16px;
  color: var(--sb-frost);
  text-shadow: 0 0 34px rgba(169, 182, 232, .55), 0 0 90px rgba(207, 227, 250, .3);
}
.sb-lede { font-size: 1.06rem; color: var(--tx2); margin: 0 0 20px; max-width: 46ch; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sb-tag {
  padding: 7px 15px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: rgba(169, 182, 232, .12); border: 2px solid rgba(169, 182, 232, .26); color: var(--sb-ice);
}
.sb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Pill buttons, because nothing else on this page has a corner.
   Scoped with .sb so the ink sticks: the shared shell sets `.cp a { color:
   inherit }`, which is more specific than a bare class, and without the
   extra class these came out white-on-ice at about 1.5:1. */
.sb .sb-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  background: linear-gradient(135deg, var(--sb-ice), var(--sb-peri));
  color: #0A1030; border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 12px 28px -14px rgba(169, 182, 232, .9);
}
.sb .sb-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(207, 227, 250, .95); }
.sb .sb-btn svg { width: 17px; height: 17px; fill: currentColor; }
.sb .sb-btn--ghost {
  background: none; color: var(--sb-ice); border-color: rgba(169, 182, 232, .45); box-shadow: none;
}
.sb .sb-btn--ghost:hover { background: rgba(169, 182, 232, .12); border-color: var(--sb-peri); }
.sb-share { display: inline-flex; gap: 8px; }
.sb-share button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(169, 182, 232, .1); border: 2px solid rgba(169, 182, 232, .3);
  color: var(--sb-ice); font-size: 1rem; transition: background .2s, border-color .2s;
}
.sb-share button:hover { background: rgba(169, 182, 232, .2); border-color: var(--sb-peri); }

/* Her model. Sized by HEIGHT, not width: sized by width she is taller than
   a short laptop viewport and pushes the copy off the bottom of the hero. */
.sb-model { position: relative; margin: 0; justify-self: end; }
.sb-model img {
  display: block; position: relative; z-index: 1;
  height: min(74vh, 620px); width: auto; max-width: 100%; margin-inline: auto;
  filter: drop-shadow(0 30px 50px rgba(6, 11, 30, .7));
  animation: sb-float 7s ease-in-out infinite;
}
@keyframes sb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-.8deg); }
}
.sb-model-moon {
  position: absolute; z-index: 0; top: 6%; left: 50%; translate: -50% 0;
  width: min(46vh, 400px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 244, 255, .22) 0%, rgba(169, 182, 232, .14) 45%, transparent 70%);
}

.sb-scroll {
  position: relative; z-index: 1; text-align: center; margin: 26px 0 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3);
}
.sb-scroll span { display: block; margin-top: 6px; font-size: 1.1rem; color: var(--sb-peri); animation: sb-nudge 2.4s ease-in-out infinite; }
@keyframes sb-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* -------------------------------------------------------------- about */
.sb-about { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 46px; align-items: center; }
/* The portrait sits in a squishy blob rather than a frame — one of the few
   places a border-radius can carry a whole mood. */
.sb-portrait { margin: 0; position: relative; }
.sb-portrait img {
  display: block; width: 100%; height: auto;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  border: 4px solid rgba(207, 227, 250, .32);
  box-shadow: 0 26px 60px -26px rgba(6, 11, 30, .9), 0 0 70px -20px rgba(169, 182, 232, .5);
  animation: sb-squish 11s ease-in-out infinite;
}
@keyframes sb-squish {
  0%, 100% { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
  50%      { border-radius: 54% 46% 48% 52% / 46% 54% 46% 54%; }
}
.sb-portrait figcaption {
  position: absolute; left: 50%; bottom: -14px; translate: -50% 0;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--sb-dusk); border: 2px solid var(--sb-line);
  color: var(--sb-blush); font-size: .9rem; font-weight: 700;
}
.sb-about-copy p { color: var(--tx2); margin: 0 0 14px; }

/* Her own panel opens every line about herself with ❄, so these do too. */
.sb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 24px 0 0; }
.sb-facts div {
  padding: 12px 16px 12px 34px; border-radius: 16px; position: relative;
  background: rgba(24, 35, 76, .5); border: 2px solid rgba(42, 55, 103, .8);
}
.sb-facts div::before {
  content: '❄'; position: absolute; left: 13px; top: 12px;
  color: var(--sb-peri); font-size: .84rem;
}
.sb-facts dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); font-weight: 700; }
.sb-facts dd { margin: 3px 0 0; font-weight: 700; color: var(--sb-frost); font-size: .94rem; }

/* -------------------------------------------------------------- watch */
.sb-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.sb-watch-card {
  border-radius: 22px; overflow: hidden;
  background: rgba(24, 35, 76, .55); border: 2px solid rgba(42, 55, 103, .9);
  transition: transform .25s ease, border-color .25s ease;
}
.sb-watch-card:hover { transform: translateY(-4px); border-color: rgba(169, 182, 232, .6); }
.sb-watch-player { position: relative; aspect-ratio: 16 / 9; background: var(--sb-night); }
.sb-watch-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sb-watch-thumb { position: absolute; inset: 0; display: block; }
.sb-watch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-watch-blank { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: var(--sb-peri); }
.sb-watch-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(207, 227, 250, .92); color: #0A1030; font-size: 1rem;
  transition: transform .2s ease, background .2s ease;
}
.sb-watch-thumb:hover .sb-watch-play { transform: translate(-50%, -50%) scale(1.12); background: #fff; }
.sb-watch-len {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(6, 11, 30, .82); color: var(--sb-ice); font-size: .72rem; font-weight: 700;
}
.sb-watch-meta { padding: 14px 16px 16px; }
/* Clamped to two lines: stream titles run long and uneven, and without
   this one wordy VOD makes its row of cards taller than the rest. */
.sb-watch-meta h3 {
  font-size: .98rem; margin: 8px 0 4px; color: var(--sb-frost); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-watch-meta p { margin: 0; font-size: .78rem; color: var(--tx3); font-weight: 600; }
.sb-watch-chip {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(169, 182, 232, .16); color: var(--sb-ice);
}
.sb-watch-chip--youtube { background: rgba(246, 199, 212, .18); color: var(--sb-blush); }
.sb-watch-chip--tiktok { background: rgba(191, 237, 228, .16); color: var(--sb-mint); }
.sb-more { margin: 26px 0 0; text-align: center; }
.sb-more a { font-weight: 700; color: var(--sb-peri); }
.sb-more a:hover { color: var(--sb-blush); }

/* --------------------------------------------------------------- shop */
.sb-empty {
  padding: 34px; text-align: center; border-radius: 22px;
  background: rgba(24, 35, 76, .45); border: 2px dashed var(--sb-line); color: var(--tx2); font-weight: 600;
}
/* The shared glass cards are built for the orange site; here they take her
   ice and periwinkle instead, scoped so no other partner's cards move. */
.sb .gal-glass::before {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(169, 182, 232, .3), transparent 70%),
    radial-gradient(34% 28% at 82% 48%, rgba(246, 199, 212, .22), transparent 70%),
    radial-gradient(40% 30% at 42% 88%, rgba(191, 237, 228, .16), transparent 70%);
}
.sb .gl-card { border-color: rgba(169, 182, 232, .2); border-radius: 22px; }
.sb .gl-card:hover, .sb .gl-card:focus-within { border-color: rgba(169, 182, 232, .55); }
.sb .gl-body { background: linear-gradient(180deg, rgba(24, 35, 76, .74), rgba(6, 11, 30, .92)); border-color: rgba(169, 182, 232, .22); }
.sb .gl-by { color: var(--sb-blush); }
.sb .gal-glass .gl-buy {
  background: linear-gradient(135deg, var(--sb-ice), var(--sb-peri)); color: #0A1030; border-radius: 999px;
}
.sb .gal-glass .gl-buy:hover {
  background: linear-gradient(135deg, #fff, var(--sb-blush));
  box-shadow: 0 8px 22px -8px rgba(207, 227, 250, .85);
}

/* -------------------------------------------------------------- links */
.sb-links { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 46px; align-items: center; }
.sb-card { margin: 0; }
.sb-card img {
  display: block; width: 100%; height: auto; border-radius: 26px;
  box-shadow: 0 30px 70px -30px rgba(6, 11, 30, .95), 0 0 60px -24px rgba(169, 182, 232, .45);
  rotate: -2deg; transition: rotate .4s ease, transform .4s ease;
}
.sb-card img:hover { rotate: 0deg; transform: translateY(-5px); }
.sb-blurb { color: var(--tx2); margin: 0 0 22px; max-width: 52ch; }
.sb-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sb .sb-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 19px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  background: rgba(24, 35, 76, .6); border: 2px solid rgba(42, 55, 103, .9); color: var(--sb-ice);
  transition: background .2s, border-color .2s, transform .2s;
}
.sb .sb-social:hover { background: rgba(169, 182, 232, .16); border-color: var(--sb-peri); transform: translateY(-2px); }
.sb .sb-social svg { width: 16px; height: 16px; fill: currentColor; }
/* A name to search for, not a door — her Discord is a username. */
.sb-discord { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--tx2); font-weight: 600; font-size: .92rem; }
.sb-discord svg { width: 16px; height: 16px; fill: var(--sb-peri); flex: 0 0 auto; }
.sb-discord b { color: var(--sb-frost); }
.sb-biz { margin: 0; font-size: .88rem; color: var(--tx3); font-weight: 600; }
.sb-biz a { color: var(--sb-peri); }

.sb-credits { margin-top: 56px; padding-top: 26px; border-top: 2px solid rgba(42, 55, 103, .7); }
.sb-credits h3 { font-size: 1.1rem; margin: 0 0 16px; color: var(--sb-frost); }
.sb-credit-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.sb-credit-role { flex: 0 0 120px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); font-weight: 700; }
.sb-credit-names { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sb-credit-names a, .sb-credit-names span { font-weight: 700; font-size: .92rem; color: var(--sb-ice); }
.sb-credit-names a:hover { color: var(--sb-blush); }

/* ------------------------------------------------------- the landing */
/* The bottom of the page, where she comes to rest. Her cloud picture is the
   backdrop and she is ALREADY IN IT, landed — which is the whole reason the
   falling sprite has to have faded out by the time you get here. */
/* The picture is 2000x1080 and she lies in the RIGHT of it. It is laid in
   at its own aspect ratio, anchored right, and the section is padded by
   roughly its height so the join card starts below her rather than across
   her. Cropping it to fill the section instead meant that on a phone the
   whole viewport was her face with the card through it. */
.sb-land { position: relative; padding: min(50vw, 620px) 0 0; overflow: hidden; isolation: isolate; }
.sb-land-scene { position: absolute; top: 0; left: 0; right: 0; z-index: -1; }
.sb-land-art { display: block; width: 100%; max-width: 1600px; height: auto; margin-left: auto; }
/* Masked at both ends rather than covered by a matching gradient. The page's
   night is a FIXED gradient, so its colour at any given point depends on
   where you have scrolled to; painting --sb-night over the top of the
   picture to hide its edge put near-black against whatever the fixed
   gradient happened to be there, and left a visible step. A mask has
   nothing to match: the picture just stops existing and the real
   background is what shows. The clear band is where she lies. */
.sb-land-scene {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 24%, #000 72%, rgba(0,0,0,.5) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 24%, #000 72%, rgba(0,0,0,.5) 90%, transparent 100%);
}
/* The cloud bank the card sits on. Held clear of the bottom so the page is
   back to night before the footer — white run flush into a dark footer was
   a hard line across the page. Wide and soft-edged, and they overlap, so
   the bank reads as one cloud with a bumpy top rather than a row of blobs. */
.sb-clouds { position: absolute; inset: auto 0 56px 0; height: 210px; z-index: 0; pointer-events: none; }
.sb-clouds i {
  position: absolute; left: var(--l); bottom: var(--b); width: var(--w);
  aspect-ratio: 4 / 1; border-radius: 50%;
  /* Falls off from the very centre. Holding it bright to a quarter of the
     way out gave each puff a flat core and a defined rim, which on a dark
     page reads as a row of lit lozenges rather than cloud. Low opacity for
     the same reason: pale on near-black becomes a lamp very quickly. */
  background: radial-gradient(closest-side,
    rgba(228, 237, 252, var(--o)) 0%,
    rgba(228, 237, 252, calc(var(--o) * .5)) 42%,
    rgba(228, 237, 252, 0) 100%);
}
/* Deep enough to leave the cloud bank somewhere to be. The bank sits in
   this gap, below the card and clear of the footer. */
.sb-land-in { position: relative; z-index: 1; padding-bottom: 280px; }

/* ------------------------------------------------------- join DRXP */
/* The shared card defaults to the site's pink and purple, which is the one
   thing on this page that was not hers. It takes her ice-into-periwinkle,
   and because that is a LIGHT card the ink flips: white type on her ice
   measures about 1.5:1, which is not readable at any size. */
.sb {
  --join-a: var(--sb-ice);
  --join-b: var(--sb-peri);
  --join-glow: rgba(169, 182, 232, .6);
  --join-ink: #0A1030;
  --join-wash: rgba(10, 16, 48, .07);
  --join-tile: rgba(255, 255, 255, .34);
  --join-tile-line: rgba(10, 16, 48, .16);
}
.sb .cp-btn-white { background: #0A1030; border-color: #0A1030; color: var(--sb-frost) !important; }
.sb .cp-btn-white:hover { background: #18234C; border-color: #18234C; }
.sb .cp-btn-ghost { border-color: rgba(10, 16, 48, .5); color: #0A1030 !important; }
.sb .cp-btn-ghost:hover { background: rgba(10, 16, 48, .1); }

/* ------------------------------------------------------------ smaller */
@media (max-width: 980px) {
  .sb-hero-in { grid-template-columns: 1fr; text-align: center; }
  .sb-hero-copy { max-width: none; margin-inline: auto; }
  .sb-lede { margin-inline: auto; }
  .sb-tags, .sb-actions { justify-content: center; }
  .sb-model { justify-self: center; order: -1; }
  .sb-model img { height: min(46vh, 380px); }
  .sb-about, .sb-links { grid-template-columns: 1fr; gap: 34px; }
  .sb-portrait, .sb-card { max-width: 400px; margin-inline: auto; }
  .sb-fall { width: 190px; margin-left: -95px; top: 26vh; }
  .sb-bunny { width: 92px; }
}
@media (max-width: 640px) {
  .sb-sec { padding: 68px 0; }
  .sb-fall { width: 140px; margin-left: -70px; }
  .sb-bunny { width: 76px; }
  .sb-credit-role { flex-basis: 100%; }
  /* At 375px the whole picture is only ~200px tall and she is a thumbnail
     in the corner of it — the payoff of the entire page, lost. On a phone
     the scene is given a fixed height and cropped to HER side instead, so
     she arrives roughly the size she is in the hero. */
  .sb-land-scene { height: 330px; }
  .sb-land-art { height: 100%; object-fit: cover; object-position: right center; max-width: none; }
  .sb-land { padding-top: 350px; }
  .sb-land-in { padding-bottom: 200px; }
}

/* Reduced motion: the page keeps its shape and loses every moving part.
   The falling sprite goes entirely — a thing whose only job is to travel
   has nothing to say standing still. */
@media (prefers-reduced-motion: reduce) {
  .sb-flakes, .sb-fall, .sb-bunny, .sb-score { display: none; }
  .sb-model img, .sb-portrait img, .sb-scroll span { animation: none; }
  .sb-card img { rotate: 0deg; }
}

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-snowflakebunnie) { --scroll-acc: #A9B6E8; }