/* =============================================================
   Reivalia — the Starry Cosmic Cafe, after dark.

   Every colour is lifted from her own art: the indigo of the night
   behind the torii, the sky blue of Nova's ears and her hair tips,
   the silver-white of her hair, the blossom pink of the sakura, and
   the warm gold of the paper lanterns.

   This page is DARK, which the shared partner shell already assumes,
   so unlike the light pages it only has to deepen the tokens rather
   than re-point all of them.
   ============================================================= */

body.cp-theme-reivalia {
  --rv-night:  #0B1030;   /* deepest sky, behind everything */
  --rv-deep:   #141C46;   /* the band sections */
  --rv-dusk:   #24306B;   /* raised surfaces */
  --rv-line:   #33407F;
  --rv-sky:    #7FB6F0;   /* Nova's ears, her hair tips */
  --rv-ice:    #C9E2FF;
  --rv-silver: #EEF3FF;   /* her hair — the body text colour */
  --rv-blossom:#F7B9D0;   /* sakura */
  --rv-rose:   #FBDCE8;
  --rv-gold:   #F5C46B;   /* the lanterns */

  background: var(--rv-night);
  color: var(--rv-silver);
}

body.cp-theme-reivalia .cp {
  --bg: var(--rv-night);
  --bg2: var(--rv-deep);
  --panel: var(--rv-dusk);
  --tx: var(--rv-silver);
  --tx2: #B9C6EE;
  --tx3: #8E9CCB;
  --line: var(--rv-line);
  --acc: var(--rv-sky);
  background: none;   /* the night layer below shows through */
  color: var(--rv-silver);
  overflow-x: clip;
}

/* ------------------------------------------------------- the night sky */
/* Fixed behind the whole page: a dusk gradient with a warm lantern glow
   low on the left, and stars over it. Everything else is above it. */
.rv-night {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, #1B2456 0%, transparent 60%),
    linear-gradient(180deg, #0B1030 0%, #141C46 45%, #1E2454 72%, #2A2350 100%);
}
.rv-night-glow {
  position: absolute; inset: auto -10% -18% -20%; height: 70vh;
  background:
    radial-gradient(45% 55% at 18% 82%, rgba(245, 196, 107, .20), transparent 70%),
    radial-gradient(40% 50% at 78% 92%, rgba(247, 185, 208, .16), transparent 72%);
  filter: blur(18px);
}
/* The deep field. Each layer is ONE 1px element carrying a few hundred
   stars as box-shadows, drifting up at its own speed — near layers faster
   than far ones, which is the whole illusion of depth. The ::after is the
   same field again one spread lower, so when the first has travelled its
   full height the second is exactly where it started and the loop has no
   seam. Three elements for six hundred stars. */
.rv-field {
  position: absolute; left: 0; top: 0;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: transparent;
  box-shadow: var(--shadows);
  animation: rv-drift var(--dur) linear infinite;
}
.rv-field::after {
  content: ""; position: absolute; left: 0; top: 2000px;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  box-shadow: var(--shadows);
}
.rv-field--0 { opacity: .55; }
.rv-field--1 { opacity: .75; }
.rv-field--2 { opacity: .9; }
@keyframes rv-drift {
  from { translate: 0 0; }
  to { translate: 0 -2000px; }
}

.rv-stars { position: absolute; inset: 0; }
/* Each star is one 2-4px dot. Written down in the view rather than
   randomised — a sky that reshuffles on every load is not a sky. */
.rv-stars b {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--rv-ice);
  box-shadow: 0 0 6px 1px rgba(201, 226, 255, .55);
  opacity: .25;
  animation: rv-twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes rv-twinkle {
  0%, 100% { opacity: .18; scale: .8; }
  50% { opacity: .95; scale: 1.15; }
}
.rv > *:not(.rv-night) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ typography */
.rv .rv-kick,
.rv .rv-kicker {
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rv-sky);
}
.rv .rv-title {
  font-family: var(--head); font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1; text-transform: uppercase; color: var(--rv-silver);
}
.rv .rv-title span { color: var(--rv-blossom); }
.rv .rv-note { font-size: .9rem; color: var(--tx2); }
.rv .rv-note code {
  padding: 2px 7px; border-radius: 6px; font-size: .86em;
  background: rgba(127, 182, 240, .16); color: var(--rv-ice);
}

.rv-sec { position: relative; padding: 84px 0; overflow: hidden; }
/* A section that hangs a charm opens a band for it, so it cannot land on a
   heading or a tile — the cafe's was sitting on the last drink. */
.rv-sec:has(> .rv-charm) { padding-top: 188px; }
.rv-sec--deep { background: rgba(20, 28, 70, .62); border-block: 1px solid var(--rv-line); }
.rv-sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 30px;
}

/* ------------------------------------------- her art behind the sections */
/* Each band carries one of her illustrations, dimmed hard and blurred a
   touch so it reads as depth rather than as a picture competing with the
   copy in front of it. The script drifts each one at its own rate. */
.rv-band-art {
  position: absolute; inset: -14% 0; z-index: -1; pointer-events: none;
  opacity: .3;
}
.rv-band-art img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(.9); }
.rv-band-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--rv-night) 0%, rgba(11, 16, 48, .55) 30%, rgba(11, 16, 48, .6) 70%, var(--rv-night) 100%);
}
.rv-band-art--soft { opacity: .22; }

/* Her hoodie embroidery, large and faint. Line art on a dark page needs to
   be lightened, not just faded — at low opacity the dark outlines vanish
   before the light ones do and the motif falls apart. */
.rv-stitch {
  position: absolute; z-index: -1; width: min(62%, 720px); height: auto;
  opacity: .16; pointer-events: none;
  filter: brightness(2.6) saturate(1.3);
  mix-blend-mode: screen;
}
.rv-stitch--left { left: -12%; top: 6%; rotate: -6deg; }
.rv-stitch--right { right: -14%; bottom: 4%; rotate: 5deg; }

/* ---------------------------------------------------------------- charms */
/* One per section, alternating sides, hung on a cord from the top edge.
   She has exactly four, so each appears once — using one twice would read
   as a mistake rather than as a set. */
/* Hung from the top edge, and they take a knock when the pointer reaches
   them. pointer-events has to be AUTO for that — the old version was none,
   which is why nothing could be hovered. The cord is the pivot: rotating
   about a point above the charm is what makes it swing like a pendulum
   rather than spin on the spot. */
.rv-charm {
  position: absolute; top: 0; z-index: 3;
  width: clamp(64px, 7vw, 108px);
  transform-origin: 50% -60px;
  animation: rv-hang 7s ease-in-out infinite;
}
.rv-charm--left  { left: clamp(10px, 5vw, 78px); animation-delay: -1.8s; }
.rv-charm--right { right: clamp(10px, 5vw, 78px); animation-delay: -4.4s; }

/* Knocked. The swing decays to nothing, so it settles instead of stopping
   dead, and it starts in the direction the pointer came from. */
.rv-charm.is-knocked { animation: rv-knock 2.1s cubic-bezier(.24, .9, .32, 1) both; }
.rv-charm.is-knocked.from-right { animation-name: rv-knock-rev; }

@keyframes rv-hang {
  0%, 100% { rotate: -1.6deg; }
  50% { rotate: 1.6deg; }
}
@keyframes rv-knock {
  0% { rotate: 0deg; }
  14% { rotate: 13deg; }
  32% { rotate: -9deg; }
  50% { rotate: 6deg; }
  68% { rotate: -3.5deg; }
  84% { rotate: 1.8deg; }
  100% { rotate: 0deg; }
}
@keyframes rv-knock-rev {
  0% { rotate: 0deg; }
  14% { rotate: -13deg; }
  32% { rotate: 9deg; }
  50% { rotate: -6deg; }
  68% { rotate: 3.5deg; }
  84% { rotate: -1.8deg; }
  100% { rotate: 0deg; }
}
.rv-charm-cord {
  display: block; width: 2px; height: 60px; margin: 0 auto;
  background: linear-gradient(var(--rv-line), var(--rv-sky));
  opacity: .7;
}
.rv-charm img {
  display: block; width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(11, 16, 48, .7));
}
@media (max-width: 760px) { .rv-charm { display: none; } }

/* ------------------------------------------------------------------ hero */
.rv-hero { position: relative; padding: 126px 0 72px; overflow: hidden; }
/* A real feather: soft at the rim, not merely transparent.
   The scene is painted twice. The blurred copy underneath carries the outer
   edge and fades to nothing at the very border; the sharp copy on top is
   masked to stop short of it. Where the sharp one ends the blurred one is
   still going, so the picture goes progressively OUT OF FOCUS on its way to
   the stars instead of just becoming see-through.
   One element cannot do this: a filter applies to all of it, so being sharp
   in the middle and soft at the rim takes two copies of the same file. */
.rv-hero-art { position: absolute; inset: -12% 0 -6%; z-index: -1; }
.rv-hero-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}

/* The soft copy. Scaled up a little so its OWN edges sit outside the frame
   — a blurred layer that ends inside the box shows the blur's own boundary,
   which is the very thing being avoided. */
.rv-hero-soft {
  filter: blur(22px) saturate(1.05);
  scale: 1.08;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 62%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 62%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The sharp copy, pulled in from every side so the blur has room to take
   over before the picture reaches the sky. */
.rv-hero-sharp {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 6%, #000 30%, #000 50%, transparent 82%),
    linear-gradient(to right, transparent 6%, #000 27%, #000 66%, transparent 86%);
  mask-image:
    linear-gradient(to bottom, transparent 6%, #000 30%, #000 50%, transparent 82%),
    linear-gradient(to right, transparent 6%, #000 27%, #000 66%, transparent 86%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* NEVER fully opaque. The veil sits above the fixed starfield, so a solid
   stop would mean the feather dissolved into a flat dark rectangle rather
   than into the sky. */
.rv-hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 16, 48, .42) 0%, rgba(11, 16, 48, .1) 40%, rgba(11, 16, 48, .5) 84%, rgba(11, 16, 48, .66) 100%),
    linear-gradient(90deg, rgba(11, 16, 48, .68) 0%, rgba(11, 16, 48, .1) 60%, transparent 86%);
}
.rv-hero-in {
  position: relative;
  /* Her column is sized by HER, not by a share of the width: she is capped
     by height so she fits the first screen. Sized by width she came out
     709px tall in a 720px viewport and pushed the whole introduction —
     name, lede, tags, buttons — below the fold. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; align-items: end;
}
.rv-hero-copy { max-width: 620px; }

/* Her model, stood in front of the scene. The moon behind her and the
   shadow under her are what make her read as standing in the hero rather
   than printed on it; the script drifts her opposite the backdrop, so she
   separates from it as you scroll. */
.rv-model {
  position: relative; margin: 0; justify-self: end; align-self: end;
  height: clamp(320px, 62vh, 620px);
}
.rv-model img {
  position: relative; z-index: 2; display: block; height: 100%; width: auto;
  filter: drop-shadow(0 26px 34px rgba(11, 16, 48, .85)) drop-shadow(0 0 40px rgba(127, 182, 240, .35));
  animation: rv-float 9s ease-in-out infinite;
}
.rv-model-moon {
  position: absolute; z-index: 1; left: 50%; top: 8%; translate: -50% 0;
  height: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(201, 226, 255, .5), rgba(127, 182, 240, .16) 52%, transparent 70%);
  filter: blur(6px);
  animation: rv-breathe 7s ease-in-out infinite;
}
@keyframes rv-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
@keyframes rv-breathe {
  0%, 100% { opacity: .8; scale: 1; }
  50% { opacity: 1; scale: 1.05; }
}

@media (max-width: 900px) {
  .rv-hero-in { grid-template-columns: 1fr; }
  /* Behind the words rather than beside them: at this width a column for
     her is a column the copy does not have. */
  .rv-model {
    position: absolute; right: -6%; bottom: 0; width: 62%; height: auto;
    opacity: .3; z-index: -1; pointer-events: none;
  }
  .rv-model img { height: auto; width: 100%; }
  .rv-model img { animation: none; filter: none; }
  .rv-model-moon { display: none; }
}
.rv-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(36, 48, 107, .72); border: 1px solid var(--rv-line);
  backdrop-filter: blur(6px);
}
.rv-name {
  font-family: var(--head); font-size: clamp(3rem, 10vw, 6.4rem); line-height: .88;
  /* A line-height under 1 pulls the capitals above the margin box, so the
     gap under the pill has to scale with the type or it disappears. */
  margin: clamp(22px, 4vw, 44px) 0 16px;
  text-transform: uppercase; color: var(--rv-silver);
  text-shadow: 0 0 34px rgba(127, 182, 240, .5), 0 6px 26px rgba(11, 16, 48, .9);
}
.rv-lede { max-width: 46ch; font-size: 1.12rem; line-height: 1.7; color: var(--rv-ice); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }
.rv-tag {
  padding: 6px 13px; border-radius: 999px; font-size: .82rem;
  background: rgba(36, 48, 107, .6); border: 1px solid var(--rv-line); color: var(--tx2);
}

.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv .rv-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; text-decoration: none; font-weight: 800;
  background: linear-gradient(135deg, var(--rv-sky), var(--rv-blossom));
  color: #0B1030; border: 0;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 28px -12px rgba(127, 182, 240, .8);
}
.rv .rv-btn svg { width: 18px; height: 18px; fill: currentColor; }
.rv .rv-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(247, 185, 208, .9); }
.rv .rv-btn--ghost {
  background: rgba(36, 48, 107, .55); color: var(--rv-silver);
  border: 1px solid var(--rv-line); box-shadow: none;
}
.rv .rv-btn--ghost:hover { border-color: var(--rv-sky); box-shadow: none; }
.rv-share { display: inline-flex; gap: 6px; }
.rv-share button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(36, 48, 107, .55); border: 1px solid var(--rv-line); color: var(--tx2);
}
.rv-share button:hover { border-color: var(--rv-sky); color: var(--rv-silver); }

/* ----------------------------------------------------------------- about */
.rv-about {
  position: relative;
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 34px; align-items: center;
}
.rv-chibi { width: 100%; height: auto; }
.rv-chibi--left { justify-self: start; }
.rv-chibi--right { justify-self: end; }
.rv-about-copy p { color: var(--tx2); line-height: 1.78; margin-bottom: 14px; }
.rv-about-copy .rv-title { margin-bottom: 18px; }

.rv-facts { margin-top: 26px; display: grid; gap: 1px; background: var(--rv-line); border-radius: 14px; overflow: hidden; }
.rv-facts > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 16px; background: rgba(20, 28, 70, .9);
}
.rv-facts dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rv-sky); }
.rv-facts dd { margin: 0; color: var(--rv-silver); text-align: right; }

@media (max-width: 1100px) {
  .rv-about { grid-template-columns: 1fr; }
  .rv-chibi { display: none; }
}

/* ------------------------------------------------------------- the cafe */
.rv-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rv-drink {
  display: grid; justify-items: center; gap: 8px;
  padding: 18px 14px 18px; border-radius: 18px; cursor: pointer;
  background: rgba(36, 48, 107, .55); border: 1px solid var(--rv-line);
  color: var(--rv-silver); font: inherit;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.rv-drink:hover, .rv-drink:focus-visible, .rv-drink.is-on {
  transform: translateY(-5px); border-color: var(--rv-sky);
  background: rgba(45, 62, 128, .78);
}
/* Her own cup, as supplied. It replaced a cup I had drawn in CSS — hers is
   properly illustrated and already in her periwinkle, so it is used at its
   own colours with nothing recoloured.
   The steam is positioned against the cup's rim rather than the box: the
   artwork sits low in its square, so a steam wisp centred on the element
   would start well above the drink. */
.rv-drink-cup { position: relative; width: 74px; aspect-ratio: 1; }
.rv-drink-cup img {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 6px 12px rgba(11, 16, 48, .5));
}
.rv-drink-steam {
  position: absolute; left: 50%; top: 14%; translate: -50% 0;
  width: 3px; height: 15px; border-radius: 2px; background: var(--rv-ice);
  opacity: 0;
}
.rv-drink:hover .rv-drink-steam,
.rv-drink.is-on .rv-drink-steam { animation: rv-steam 1.8s ease-in-out infinite; }
@keyframes rv-steam {
  0% { opacity: 0; translate: -50% 4px; scale: 1 .6; }
  40% { opacity: .9; }
  100% { opacity: 0; translate: -50% -12px; scale: 1 1.3; }
}
.rv-drink-name { font-family: var(--head); font-size: 1.1rem; letter-spacing: .03em; }
.rv-drink-cmd { font-size: .72rem; letter-spacing: .1em; color: var(--tx3); }
.rv-menu-note {
  margin-top: 20px; text-align: center; min-height: 1.6em;
  font-size: 1rem; color: var(--rv-ice);
}

/* ----------------------------------------------------------------- watch */
.rv-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.rv-watch-card {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: rgba(20, 28, 70, .82); border: 1px solid var(--rv-line);
  transition: transform .2s ease, border-color .2s ease;
}
.rv-watch-card:hover, .rv-watch-card:focus-within { transform: translateY(-4px); border-color: var(--rv-sky); }
.rv-watch-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--rv-deep); overflow: hidden; text-decoration: none;
}
.rv-watch-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-watch-blank { display: grid; place-items: center; height: 100%; color: var(--rv-sky); font-size: 2rem; }
.rv-watch-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(11, 16, 48, .72); border: 2px solid var(--rv-ice); color: var(--rv-ice);
  font-size: .85rem; padding-left: 3px; transition: scale .2s ease, background .2s ease;
}
.rv-watch-card:hover .rv-watch-play { scale: 1.12; background: var(--rv-sky); color: #0B1030; }
.rv-watch-len {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px;
  background: rgba(11, 16, 48, .85); color: var(--rv-ice); font-size: .72rem;
}
.rv-watch-meta { padding: 12px 14px 14px; }
.rv-watch-chip {
  display: inline-block; margin-bottom: 7px; padding: 3px 9px; border-radius: 999px;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(127, 182, 240, .16); color: var(--rv-ice);
}
.rv-watch-chip--youtube { background: rgba(247, 185, 208, .18); color: var(--rv-rose); }
.rv-watch-meta h3 {
  font-size: .95rem; line-height: 1.35; color: var(--rv-silver);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-watch-meta p { margin-top: 5px; font-size: .78rem; color: var(--tx3); }
.rv-more { margin-top: 20px; text-align: center; }
.rv .rv-more a { color: var(--rv-sky); }
.rv .rv-more a:hover { color: var(--rv-blossom); }

/* ------------------------------------------------------------------ shop */
.rv-empty {
  padding: 34px; text-align: center; border-radius: 18px;
  background: rgba(36, 48, 107, .45); border: 1px dashed var(--rv-line); color: var(--tx2);
}
/* The shared glass cards are built for the orange site; here they take her
   sky and blossom instead, scoped so no other partner's cards move. */
.rv .gal-glass::before {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(127, 182, 240, .3), transparent 70%),
    radial-gradient(34% 28% at 82% 48%, rgba(247, 185, 208, .24), transparent 70%),
    radial-gradient(40% 30% at 42% 88%, rgba(245, 196, 107, .16), transparent 70%);
}
.rv .gl-card { border-color: rgba(127, 182, 240, .18); }
.rv .gl-card:hover, .rv .gl-card:focus-within { border-color: rgba(127, 182, 240, .5); }
.rv .gl-body { background: linear-gradient(180deg, rgba(20, 28, 70, .72), rgba(11, 16, 48, .9)); border-color: rgba(127, 182, 240, .2); }
.rv .gl-by { color: var(--rv-blossom); }
.rv .gal-glass .gl-buy {
  background: linear-gradient(135deg, var(--rv-sky), var(--rv-blossom)); color: #0B1030;
}
.rv .gal-glass .gl-buy:hover {
  background: linear-gradient(135deg, var(--rv-ice), var(--rv-rose));
  box-shadow: 0 8px 22px -8px rgba(127, 182, 240, .8);
}

/* ------------------------------------------------------------ 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 button pairing — sky
   into blossom — so the call to action is the brightest thing on a dark
   page, which is what it should be.
   A light card needs dark type, so the ink flips and the inner tiles go
   dark-on-light rather than the white-on-dark the default assumes. */
.rv {
  --join-a: var(--rv-sky);
  --join-b: var(--rv-blossom);
  --join-glow: rgba(127, 182, 240, .55);
  --join-ink: #0B1030;
  --join-wash: rgba(11, 16, 48, .07);
  --join-tile: rgba(255, 255, 255, .3);
  --join-tile-line: rgba(11, 16, 48, .16);
}
/* The buttons are white-on-gradient by default, which vanishes on a light
   card; hers invert to her night blue. */
.rv .cp-btn-white { background: var(--rv-night); border-color: var(--rv-night); color: var(--rv-ice) !important; }
.rv .cp-btn-white:hover { background: var(--rv-dusk); border-color: var(--rv-dusk); color: #fff !important; }
.rv .cp-btn-ghost { border-color: rgba(11, 16, 48, .5); color: var(--rv-night) !important; }
.rv .cp-btn-ghost:hover { background: var(--rv-night); border-color: var(--rv-night); color: var(--rv-ice) !important; }

/* ----------------------------------------------------------------- lodge */
.rv-lodge { position: relative; text-align: center; }
.rv-lodge-blurb { max-width: 56ch; margin: 14px auto 0; color: var(--tx2); line-height: 1.75; }

.rv-path { list-style: none; margin: 30px auto 0; padding: 0; max-width: 520px; display: grid; gap: 12px; }
.rv-path li {
  display: grid; grid-template-columns: 24px auto 1fr; align-items: baseline; gap: 12px;
  padding: 12px 18px; border-radius: 14px; text-align: left;
  background: rgba(36, 48, 107, .5); border: 1px solid var(--rv-line);
}
.rv-path-star { color: var(--rv-gold); }
.rv-path b { font-family: var(--head); font-size: 1rem; letter-spacing: .04em; color: var(--rv-silver); white-space: nowrap; }
.rv-path span:not(.rv-path-star) { color: var(--tx2); font-size: .92rem; }

.rv-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 16px; }
.rv .rv-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: rgba(36, 48, 107, .6); border: 1px solid var(--rv-line); color: var(--rv-silver);
  transition: transform .16s ease, border-color .16s ease;
}
.rv .rv-social svg { width: 17px; height: 17px; fill: currentColor; }
.rv .rv-social:hover { transform: translateY(-2px); border-color: var(--rv-sky); }
.rv-brands { font-size: .92rem; color: var(--tx2); }
.rv-brands b { color: var(--rv-ice); }
.rv-biz { margin-top: 8px; font-size: .88rem; color: var(--tx3); }
.rv .rv-biz a { color: var(--tx2); }

.rv-credits {
  margin-top: 40px; padding: 24px 26px; border-radius: 18px;
  background: rgba(20, 28, 70, .72); border: 1px solid var(--rv-line);
}
.rv-credits h3 { font-family: var(--head); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 14px; }
.rv-credit-group { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 9px 0; border-top: 1px solid var(--rv-line); }
.rv-credit-role { min-width: 120px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rv-sky); }
.rv-credit-names { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.rv-credit-names a, .rv-credit-names span { color: var(--tx2); }

@media (max-width: 620px) {
  .rv-hero { padding: 104px 0 64px; }
  .rv-sec { padding: 56px 0; }
  .rv-actions .rv-btn { flex: 1 1 100%; justify-content: center; }
  .rv-path li { grid-template-columns: 20px 1fr; }
  .rv-path b { grid-column: 2; }
  .rv-path span:not(.rv-path-star) { grid-column: 2; }
}

/* --------------------------------------------------------- calmer modes */
@media (prefers-reduced-motion: reduce) {
  .rv-stars b, .rv-charm, .rv-drink-steam, .rv-field, .rv-model img, .rv-model-moon { animation: none; }
  .rv-charm.is-knocked { animation: none; }
  .rv-stars b { opacity: .5; }
  .rv-drink, .rv-btn, .rv-social, .rv-watch-card { transition: none; }
  [data-rv-parallax] { translate: none !important; }
}
.perf-lite .rv-stars b, .perf-lite .rv-charm, .perf-lite .rv-field { animation: none; }

/* Her Discord is a username, not a server invite — printed as a name to
   search for rather than a link, because discord.gg/<username> 404s. */
.rv-discord { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--tx2); font-weight: 600; font-size: .92rem; }
.rv-discord svg { width: 16px; height: 16px; fill: var(--rv-sky); flex: 0 0 auto; }
.rv-discord b { color: var(--rv-silver); }

/* ---------------------------------------------------------- her gallery */
/* The shared gallery partial in her colours. */
.rv .cpg-kick { color: var(--rv-sky); }
.rv .cpg-title { font-family: var(--rv-round, inherit); color: var(--rv-silver); }
.rv .cpg-grid a { border: 1px solid rgba(127, 182, 240, .22); border-radius: 18px; }
.rv .cpg-grid a:hover, .rv .cpg-grid a:focus-visible { border-color: rgba(127, 182, 240, .6); }
.rv .cpg-grid a:focus-visible { outline-color: var(--rv-blossom); }

/* 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-reivalia) { --scroll-acc: #7FB6F0; }