/* =============================================================
   MommyMaple — partner page theme (views/creators/mommymaple.php)

   "The Den": the Boss's private casino lounge. Oxblood velvet, wine and
   gold, from her "Gamba Maple" casino art and her mafia-boss lore.
     void   #0C0506 · ink #160809 · oxblood #2A080E · maroon #4A0D18
     wine   #6E1224 · red #A3192F · rose #C8475F
     gold   #C9A45C · light gold #E6CB8F · champagne #F3E3BD
     ivory  #F4EADB · muted #C2A9A1
   Fonts (self-hosted, SIL Open Font License): Cormorant Garamond for the
   elegant serif headings, UnifrakturMaguntia for the blackletter her Twitch
   panels are written in, Nunito for reading.
   Motion: velvet curtains parting on arrival, gold dust, crows gliding past,
   a gold-foil shimmer on her name, a flipping playing card, a swaying charm
   and a deck that deals itself. All of it stops for reduced motion and
   .perf-lite.
   ============================================================= */

@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; 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: 'UnifrakturMaguntia'; src: url('/assets/fonts/unifraktur-maguntia-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

body.cp-theme-mommymaple { background: #0C0506; }

/* ---------------- aurora background ----------------
   After Mark Boots' "Background gradient moves with mouse" CodePen, in her
   colours and kept dim: layered glows whose centres drift with the pointer
   (--ax/--ay, eased in mommymaple.js). One fixed, screen-sized layer, so only
   what's on screen repaints. To revert: delete this block, the .mm-aurora
   element in the view and the aurora block in mommymaple.js. */
.mm { isolation: isolate; }
.mm-aurora {
  --x: calc(var(--ax, 0) * 1px);
  --y: calc(var(--ay, 0) * 1px);
  position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background-image:
    radial-gradient(55% 65% at calc(50% + var(--x)) calc(0% + var(--y)), rgba(163, 25, 47, .42), transparent 70%),
    radial-gradient(45% 55% at calc(85% - var(--x)) calc(15% - var(--y)), rgba(201, 164, 92, .13), transparent 70%),
    radial-gradient(70% 75% at calc(8% + var(--x)) calc(85% + var(--y)), rgba(110, 18, 36, .5), transparent 70%),
    radial-gradient(60% 60% at calc(100% - var(--x)) calc(100% - var(--y)), rgba(74, 13, 24, .6), transparent 72%),
    radial-gradient(40% 45% at calc(30% - var(--x)) calc(55% + var(--y)), rgba(200, 71, 95, .12), transparent 70%),
    linear-gradient(115deg, #140608 0%, #1E080D 45%, #0C0506 100%);
  background-blend-mode: screen, screen, normal, normal, screen, normal;
}
.mm-aurora::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px); }

.mm {
  --k-void: #0C0506; --k-ink: #160809; --k-oxblood: #2A080E; --k-maroon: #4A0D18;
  --k-wine: #6E1224; --k-red: #A3192F; --k-rose: #C8475F;
  --k-gold: #C9A45C; --k-gold2: #E6CB8F; --k-champ: #F3E3BD;
  --k-ivory: #F4EADB; --k-soft: #E2D2C6; --k-muted: #C2A9A1;
  --k-line: rgba(201, 164, 92, .22); --k-line2: rgba(201, 164, 92, .42);
  --k-card: linear-gradient(160deg, rgba(74, 13, 24, .55), rgba(22, 8, 9, .82));
  --k-serif: 'Cormorant Garamond', 'Georgia', serif;
  --k-black: 'UnifrakturMaguntia', 'Cormorant Garamond', serif;
  --k-foil: linear-gradient(100deg, #9C7A3C 0%, #E6CB8F 22%, #FFF3D1 34%, #C9A45C 48%, #8E6A2E 62%, #E6CB8F 80%, #B8904A 100%);
  --k-ease: cubic-bezier(.22, 1, .36, 1);
  --k-spring: cubic-bezier(.34, 1.45, .64, 1);
  /* creator.css tokens, pointed at her palette for the shared join block */
  --pink: var(--k-red); --purple: var(--k-maroon); --ink: var(--k-ivory); --ink2: var(--k-soft); --ink3: var(--k-muted);
  padding-top: 0;
  color: var(--k-ivory);
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--k-void);
}
.mm ::selection { background: var(--k-red); color: var(--k-champ); }

/* ---------------- shared bits ---------------- */
.mm-bl { font-family: var(--k-black); font-weight: 400; letter-spacing: .02em; }
.mm-kick { display: flex; align-items: center; gap: 10px; font-family: var(--k-serif); font-style: italic; font-size: 18px; color: var(--k-gold2); }
.mm-kick span { font-style: normal; font-size: 11px; color: var(--k-gold); }
.mm-title { margin-top: 2px; font-family: var(--k-serif); font-weight: 600; font-size: clamp(38px, 5vw, 62px); line-height: .98; letter-spacing: .01em; color: var(--k-ivory); text-transform: none; }
.mm-title em { font-style: italic; background: var(--k-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mm-foil 7s ease-in-out infinite alternate; }
@keyframes mm-foil { to { background-position: 100% 0; } }
.mm-sec { position: relative; padding-top: 100px; }
.mm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 30px; }
.mm-note { font-size: 15px; font-weight: 700; color: var(--k-muted); }
.mm-empty { padding: 28px; border: 1px dashed var(--k-line2); text-align: center; color: var(--k-soft); }
.mm-link { padding: 10px 20px; border: 1px solid var(--k-line2); border-radius: 2px; background: rgba(22, 8, 9, .6); font: 600 16px/1 var(--k-serif); letter-spacing: .04em; color: var(--k-gold2) !important; cursor: pointer; white-space: nowrap; transition: background-color .35s, color .35s, border-color .35s, letter-spacing .45s var(--k-ease); }
.mm-link:hover { background: var(--k-gold); border-color: var(--k-gold); color: var(--k-ink) !important; letter-spacing: .08em; }
.mm-panel { position: relative; background: var(--k-card); border: 1px solid var(--k-line); box-shadow: 0 30px 60px -40px #000, inset 0 0 0 4px rgba(22, 8, 9, .6), inset 0 0 0 5px var(--k-line); }

.mm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 2px; font: 600 18px/1 var(--k-serif); letter-spacing: .06em; white-space: nowrap; transition: transform .4s var(--k-ease), box-shadow .4s var(--k-ease), background-color .3s, color .3s; }
.mm-btn svg { width: 18px; height: 18px; fill: currentColor; }
.mm-btn--gold { background: linear-gradient(135deg, #B8904A, #E6CB8F 45%, #C9A45C); color: #2A080E !important; box-shadow: 0 14px 30px -14px rgba(201, 164, 92, .7), inset 0 1px 0 rgba(255, 243, 209, .6); }
.mm-btn--gold::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .8s var(--k-ease); }
.mm-btn--gold:hover::after { left: 130%; }
.mm-btn--line { color: var(--k-champ) !important; box-shadow: inset 0 0 0 1px var(--k-line2); background: rgba(22, 8, 9, .45); }
.mm-btn--line:hover { background: var(--k-wine); box-shadow: inset 0 0 0 1px var(--k-gold); }
.mm-btn:hover { transform: translateY(-3px); }
.mm-share { display: flex; gap: 8px; }
.mm-share button { width: 48px; height: 48px; border: 1px solid var(--k-line2); border-radius: 50%; background: rgba(22, 8, 9, .5); color: var(--k-gold2); font-size: 17px; cursor: pointer; transition: transform .4s var(--k-spring), background-color .3s, color .3s; }
.mm-share button:hover { background: var(--k-gold); color: var(--k-ink); transform: rotate(-12deg); }
.mm-btn:focus-visible, .mm-link:focus-visible, .mm-soc:focus-visible, .mm-share button:focus-visible, .mm-thumb:focus-visible,
.mm-playing:focus-visible, .mm-draw:focus-visible, .mm-code-copy:focus-visible, .mm-pill:focus-visible { outline: 2px solid var(--k-gold2); outline-offset: 4px; }

/* Scroll reveals (creator-media.js): rise out of the dark. */
.cp-js .mm [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(40px); filter: blur(4px); }
.mm [data-reveal] { transition: opacity 1.1s var(--k-ease), transform 1.1s var(--k-ease), filter 1.1s var(--k-ease); }

/* ---------------- hero ---------------- */
.mm-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 940px); padding: 130px 0 90px; display: flex; align-items: center; }
.mm-hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--k-ink); }
.mm-hero-img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 50% 40%; opacity: .42; filter: saturate(1.1) contrast(1.05); animation: mm-drift 34s ease-in-out infinite alternate; }
@keyframes mm-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, 1%); } }
.mm-hero-shade { position: absolute; inset: 0; background:
  radial-gradient(70% 90% at 72% 50%, transparent 0%, rgba(12, 5, 6, .55) 60%, rgba(12, 5, 6, .95) 100%),
  linear-gradient(90deg, rgba(12, 5, 6, .96) 0%, rgba(42, 8, 14, .78) 40%, rgba(42, 8, 14, .25) 75%),
  linear-gradient(0deg, var(--k-void) 0%, transparent 30%); }
/* Gold dust rising. */
.mm-dust { position: absolute; inset: 0; pointer-events: none; }
.mm-dust i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--k-gold2); box-shadow: 0 0 8px 2px rgba(230, 203, 143, .6); opacity: 0; animation: mm-dust var(--t) linear var(--d) infinite; }
@keyframes mm-dust { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; translate: 30px -95vh; } }
/* Crows gliding across. */
.mm-crows { position: absolute; inset: 0; pointer-events: none; }
.mm-crow { position: absolute; top: var(--top); left: -12%; width: calc(90px * var(--scale)); color: #050203; opacity: 0; animation: mm-fly 26s linear var(--delay) infinite; filter: drop-shadow(0 0 10px rgba(163, 25, 47, .35)); }
.mm-crow svg { display: block; width: 100%; fill: currentColor; animation: mm-flap .9s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes mm-fly { 0% { left: -12%; opacity: 0; transform: translateY(0); } 5% { opacity: .85; } 50% { transform: translateY(-40px); } 95% { opacity: .85; } 100% { left: 110%; opacity: 0; transform: translateY(10px); } }
@keyframes mm-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
/* Velvet curtains, parted on arrival. */
.mm-curtain { position: absolute; top: 0; bottom: 0; z-index: 5; width: 52%; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 30%),
    repeating-linear-gradient(90deg, #3A0912 0 18px, #5C0F1E 34px, #7A1428 44px, #4A0D18 58px, #2A080E 72px);
  box-shadow: inset 0 -6px 0 var(--k-gold), inset 0 -9px 0 #7A5A26; animation: mm-part-l 1.9s var(--k-ease) .35s forwards; }
.mm-curtain--l { left: 0; transform-origin: 0 0; }
.mm-curtain--r { right: 0; transform-origin: 100% 0; animation-name: mm-part-r; }
@keyframes mm-part-l { to { transform: translateX(-100%) skewX(6deg); visibility: hidden; } }
@keyframes mm-part-r { to { transform: translateX(100%) skewX(-6deg); visibility: hidden; } }

.mm-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px 50px; align-items: center; width: 100%; }
.mm-welcome { font-size: clamp(26px, 3vw, 38px); color: var(--k-rose); text-shadow: 0 0 24px rgba(163, 25, 47, .6); animation: mm-rise 1.1s var(--k-ease) 1.3s both; }
.mm-name { margin: 4px 0 0; font-family: var(--k-serif); font-style: italic; font-weight: 600; font-size: clamp(58px, 9vw, 124px); line-height: .9; letter-spacing: -.01em; text-transform: none; animation: mm-rise 1.2s var(--k-ease) 1.45s both; }
.mm-name span { background: var(--k-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); animation: mm-foil 6s ease-in-out infinite alternate; }
.mm-tagline { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-family: var(--k-serif); font-weight: 600; font-size: clamp(16px, 1.7vw, 20px); letter-spacing: .32em; text-transform: uppercase; color: var(--k-champ); animation: mm-rise 1.1s var(--k-ease) 1.6s both; }
.mm-tagline::before, .mm-tagline::after { content: ''; height: 1px; width: 44px; background: linear-gradient(90deg, transparent, var(--k-gold)); }
.mm-tagline::after { background: linear-gradient(90deg, var(--k-gold), transparent); }
.mm-lede { max-width: 46ch; margin-top: 18px; font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 600; line-height: 1.7; color: var(--k-soft); animation: mm-rise 1.1s var(--k-ease) 1.75s both; }
.mm-hero .mm-actions { margin-top: 28px; animation: mm-rise 1.1s var(--k-ease) 1.9s both; }
@keyframes mm-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* Stats as poker chips. */
.mm-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; animation: mm-rise 1.1s var(--k-ease) 2.05s both; }
.mm-chip-stat { position: relative; display: grid; place-content: center; width: 92px; height: 92px; border-radius: 50%; text-align: center; background: radial-gradient(circle, #2A080E 52%, transparent 53%), repeating-conic-gradient(var(--k-gold) 0 15deg, #1A0709 15deg 30deg); box-shadow: 0 10px 22px -10px #000, inset 0 0 0 3px #1A0709; transition: transform .6s var(--k-spring); }
.mm-chip-stat::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed var(--k-line2); }
.mm-chip-stat.red { background: radial-gradient(circle, #6E1224 52%, transparent 53%), repeating-conic-gradient(var(--k-champ) 0 15deg, #6E1224 15deg 30deg); }
.mm-chip-stat:hover { transform: rotate(180deg) scale(1.06); }
.mm-chip-stat:hover b, .mm-chip-stat:hover span { transform: rotate(-180deg); }
.mm-chip-stat b, .mm-chip-stat span { position: relative; display: block; transition: transform .6s var(--k-spring); }
.mm-chip-stat b { font: 600 25px/1 var(--k-serif); color: var(--k-champ); }
.mm-chip-stat span { margin-top: 3px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--k-gold2); }

/* The Queen of Hearts card: flips to her plush ([data-swap] toggles .is-swapped). */
.mm-hero-card { position: relative; justify-self: center; width: min(360px, 100%); perspective: 1400px; animation: mm-deal 1.3s var(--k-spring) 1.5s both; }
@keyframes mm-deal { from { opacity: 0; transform: translate(60px, -40px) rotate(18deg) scale(.8); } to { opacity: 1; transform: none; } }
.mm-playing { position: relative; cursor: pointer; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) rotate(-4deg); transform-style: preserve-3d; transition: transform .7s var(--k-ease); animation: mm-hover 7s ease-in-out 3s infinite; }
@keyframes mm-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.mm-playing-inner { position: relative; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform 1s var(--k-ease); }
.mm-playing.is-swapped .mm-playing-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 22px; border-radius: 16px; background: linear-gradient(160deg, #F7EEDC, #E8D6B4); box-shadow: 0 40px 70px -30px #000, 0 0 0 1px rgba(201, 164, 92, .6), inset 0 0 0 8px #F7EEDC, inset 0 0 0 9px var(--k-gold); backface-visibility: hidden; }
.mm-face--back { transform: rotateY(180deg); background: linear-gradient(160deg, #2A080E, #4A0D18); box-shadow: 0 40px 70px -30px #000, 0 0 0 1px var(--k-gold), inset 0 0 0 8px #2A080E, inset 0 0 0 9px var(--k-gold); }
.mm-face img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; border-radius: 8px; box-shadow: 0 0 0 2px var(--k-gold), 0 12px 24px -10px rgba(0, 0, 0, .6); }
.mm-face--back img { object-fit: contain; background: radial-gradient(circle, rgba(201, 164, 92, .25), transparent 70%); box-shadow: none; }
.mm-face-name { margin-top: 14px; font: italic 600 32px/1 var(--k-serif); color: var(--k-wine); }
.mm-face--back .mm-face-name { color: var(--k-gold2); }
.mm-index { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; font: 600 30px/.9 var(--k-serif); color: var(--k-red); }
.mm-index i { font-style: normal; font-size: 22px; }
.mm-index--tl { top: 12px; left: 14px; }
.mm-face .mm-index { padding: 4px 3px; border-radius: 6px; background: #F7EEDC; }
.mm-face--back .mm-index { background: #2A080E; }
.mm-index--br { right: 14px; bottom: 12px; transform: rotate(180deg); }
.mm-face--back .mm-index { color: var(--k-gold2); }
.mm-playing-hint { position: absolute; left: 50%; bottom: -44px; translate: -50% 0; font: italic 600 17px/1 var(--k-serif); color: var(--k-gold2); white-space: nowrap; opacity: .85; }
.mm-float-suit { position: absolute; z-index: -1; font-family: var(--k-serif); line-height: 1; color: var(--k-red); text-shadow: 0 0 22px rgba(163, 25, 47, .7); opacity: .75; animation: mm-orbit 9s ease-in-out infinite; }
.mm-float-suit.s1 { top: -6%; left: -14%; font-size: 64px; color: var(--k-gold); text-shadow: 0 0 22px rgba(201, 164, 92, .5); }
.mm-float-suit.s2 { top: 18%; right: -18%; font-size: 52px; animation-delay: -3s; }
.mm-float-suit.s3 { bottom: 10%; left: -20%; font-size: 46px; animation-delay: -5s; }
.mm-float-suit.s4 { bottom: -8%; right: -10%; font-size: 58px; color: var(--k-gold); animation-delay: -1.5s; text-shadow: 0 0 22px rgba(201, 164, 92, .5); }
@keyframes mm-orbit { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(8px, -18px) rotate(12deg); } }

/* ---------------- band ---------------- */
.mm-band { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid var(--k-gold); background: linear-gradient(180deg, #4A0D18, #2A080E); box-shadow: 0 0 0 3px var(--k-void), 0 0 0 4px var(--k-line2); -webkit-font-smoothing: antialiased; }
.mm-band-track { display: flex; align-items: center; width: max-content; animation: mm-marquee 44s linear infinite; }
.mm-band span { padding: 14px 18px; font: italic 600 23px/1 var(--k-serif); letter-spacing: .03em; color: var(--k-champ); white-space: nowrap; }
.mm-band i { font-style: normal; font-size: 16px; color: var(--k-gold); }
.mm-band i:nth-of-type(4n+2), .mm-band i:nth-of-type(4n+3) { color: var(--k-rose); }
@keyframes mm-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------------- about: the case file ---------------- */
.mm-about { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: start; }
.mm-dossier { position: relative; padding: 46px 44px 40px; background:
    radial-gradient(120% 80% at 0% 0%, rgba(201, 164, 92, .08), transparent 60%),
    linear-gradient(160deg, #241012, #150809);
  border: 1px solid var(--k-line2); box-shadow: 0 40px 80px -50px #000, inset 0 0 0 6px #150809, inset 0 0 0 7px var(--k-line); }
.mm-dossier::before, .mm-dossier::after { content: ''; position: absolute; width: 38px; height: 38px; border: 2px solid var(--k-gold); }
.mm-dossier::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.mm-dossier::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.mm-stamp { position: absolute; top: 34px; right: 34px; padding: 6px 14px; border: 3px double var(--k-red); color: var(--k-red); font: 700 15px/1 var(--k-serif); letter-spacing: .3em; text-transform: uppercase; transform: rotate(9deg); opacity: .75; mix-blend-mode: screen; }
.is-in .mm-stamp { animation: mm-stamp .5s var(--k-spring) .6s both; }
@keyframes mm-stamp { from { transform: rotate(9deg) scale(2.2); opacity: 0; } to { transform: rotate(9deg) scale(1); opacity: .75; } }
.mm-dossier .mm-title { margin-bottom: 20px; }
.mm-dossier p:not(.mm-kick) { max-width: 62ch; font-size: 16.5px; font-weight: 600; line-height: 1.8; color: var(--k-soft); }
.mm-dossier p.mm-first { font: italic 600 23px/1.5 var(--k-serif); color: var(--k-champ); }
.mm-dossier p + p { margin-top: 12px; }
.mm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mm-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--k-line2); font-size: 13px; font-weight: 800; color: var(--k-champ); background: rgba(74, 13, 24, .35); transition: background-color .3s, border-color .3s, transform .4s var(--k-spring); }
.mm-tag i { font-style: normal; color: var(--k-gold); }
.mm-tag:nth-child(even) i { color: var(--k-rose); }
.mm-tag:hover { background: var(--k-wine); border-color: var(--k-gold); transform: translateY(-3px); }
.mm-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--k-line); }
.mm-soc { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 40px; background: rgba(22, 8, 9, .6); box-shadow: inset 0 0 0 1px var(--k-line2); font-weight: 800; font-size: 14px; color: var(--k-ivory) !important; transition: background-color .3s, box-shadow .3s, transform .4s var(--k-spring); }
.mm-soc .i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #B8904A, #E6CB8F); color: #2A080E; }
.mm-soc .i svg { width: 15px; height: 15px; fill: currentColor; }
.mm-soc:hover { background: var(--k-wine); box-shadow: inset 0 0 0 1px var(--k-gold); transform: translateY(-3px); }

.mm-side { display: grid; gap: 26px; }
.mm-facts { margin: 0; padding: 20px 24px; }
.mm-fact { padding: 11px 0; border-bottom: 1px solid var(--k-line); }
.mm-fact:last-child { border-bottom: 0; }
.mm-fact dt { font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--k-gold); }
.mm-fact dd { margin: 3px 0 0; font: 600 20px/1.25 var(--k-serif); color: var(--k-ivory); }
.mm-charm { position: relative; margin: 0; padding-top: 40px; text-align: center; }
.mm-charm-string { position: absolute; top: 0; left: 50%; width: 2px; height: 48px; background: linear-gradient(var(--k-gold), var(--k-rose)); }
.mm-charm img { position: relative; width: min(230px, 80%); height: auto; margin: 0 auto; transform-origin: 50% -30px; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .6)); animation: mm-swing 4.5s ease-in-out infinite; }
@keyframes mm-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.mm-charm figcaption { margin-top: 12px; font: italic 600 18px/1 var(--k-serif); color: var(--k-gold2); }

/* ---------------- videos ---------------- */
.mm-vods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mm-media { position: relative; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(160deg, #241012, #150809); border: 1px solid var(--k-line); transition: transform .6s var(--k-ease), border-color .4s, box-shadow .6s var(--k-ease); }
.mm-media:hover { transform: translateY(-6px); border-color: var(--k-gold); box-shadow: 0 30px 60px -34px #000, 0 0 40px -20px rgba(201, 164, 92, .5); }
.mm-player { position: relative; aspect-ratio: 16 / 9; background: var(--k-oxblood); }
.mm-media--tall .mm-player { aspect-ratio: 9 / 16; }
.mm-thumb { position: absolute; inset: 0; display: block; overflow: hidden; }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--k-ease), filter .6s; filter: saturate(.9); }
.mm-media:hover .mm-thumb img { transform: scale(1.06); filter: saturate(1.1); }
.mm-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(22, 8, 9, .85)); }
.mm-play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(22, 8, 9, .6); color: var(--k-gold2); box-shadow: inset 0 0 0 1px var(--k-gold); transition: transform .5s var(--k-spring), background-color .3s, color .3s; }
.mm-play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.mm-media:hover .mm-play { transform: scale(1.14); background: var(--k-gold); color: var(--k-oxblood); }
.mm-len { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 9px; background: rgba(12, 5, 6, .85); border: 1px solid var(--k-line); font-size: 12px; font-weight: 900; color: var(--k-champ); }
.mm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mm-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, var(--k-wine), var(--k-oxblood)); }
.mm-thumb-fallback img { width: 40%; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--k-gold); }
.mm-media-meta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.mm-chip { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--k-line2); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--k-gold2); }
.mm-chip.clip { color: var(--k-rose); border-color: rgba(200, 71, 95, .5); }
.mm-chip.tiktok { color: var(--k-champ); }
.mm-media-title { font: 600 20px/1.2 var(--k-serif); color: var(--k-ivory); text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-media-sub { font-size: 12.5px; font-weight: 700; color: var(--k-muted); }
.mm-sub { display: flex; align-items: center; gap: 12px; margin: 56px 0 18px; font: italic 600 32px/1 var(--k-serif); color: var(--k-ivory); text-transform: none; }
.mm-sub span { font-style: normal; font-size: 20px; color: var(--k-gold); }
.mm-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; margin: 0 -12px; padding: 8px 12px 26px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--k-gold) transparent; }
.mm-row > * { scroll-snap-align: start; }
.mm-row--tall { grid-auto-columns: 226px; }

/* ---------------- draw a card ---------------- */
.mm-shuffle { font-family: var(--k-serif); }
.mm-deck-note { margin: -12px 0 28px; }
.mm-deck { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
.mm-draw { position: relative; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 5 / 7.4; -webkit-tap-highlight-color: transparent; }
.mm-draw-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--k-ease), translate .5s var(--k-ease); }
.mm-draw:hover .mm-draw-inner { translate: 0 -10px; }
.mm-draw.is-drawn .mm-draw-inner { transform: rotateY(180deg); }
.mm-draw-back, .mm-draw-front { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; backface-visibility: hidden; }
.mm-draw-back { display: grid; place-items: center; background:
    radial-gradient(circle at 50% 50%, rgba(201, 164, 92, .25), transparent 40%),
    repeating-linear-gradient(45deg, rgba(201, 164, 92, .22) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(201, 164, 92, .22) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #6E1224, #2A080E);
  box-shadow: 0 20px 40px -24px #000, inset 0 0 0 6px #2A080E, inset 0 0 0 7px var(--k-gold); }
.mm-draw-emblem { display: grid; place-items: center; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #2A080E; box-shadow: 0 0 0 2px var(--k-gold), 0 0 0 6px #2A080E, 0 0 0 7px var(--k-line2); }
.mm-draw-emblem { position: relative; }
.mm-draw-emblem b { font: 400 clamp(40px, 5vw, 64px)/1 var(--k-black); color: var(--k-gold2); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.mm-draw-emblem i { position: absolute; bottom: 10%; font-style: normal; font-size: 13px; color: var(--k-rose); }
.mm-draw:hover .mm-draw-back { box-shadow: 0 30px 50px -24px #000, inset 0 0 0 6px #2A080E, inset 0 0 0 7px var(--k-gold2), 0 0 30px -10px rgba(201, 164, 92, .6); }
.mm-draw-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; padding: 16px 12px 14px; background: linear-gradient(160deg, #F7EEDC, #E8D6B4); box-shadow: 0 20px 40px -24px #000, inset 0 0 0 5px #F7EEDC, inset 0 0 0 6px var(--k-gold); }
.mm-draw-front .mm-index { top: 10px; left: 12px; font-size: 22px; }
.mm-draw-front img { width: 86%; aspect-ratio: 1; margin-top: 12px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--k-gold); }
.mm-draw-line { margin-top: auto; padding-top: 10px; font: italic 600 16px/1.2 var(--k-serif); color: var(--k-wine); text-align: center; }
/* Dealt in one after another when the section shows. */
.cp-js .mm-deck:not(.is-dealt) .mm-draw { opacity: 0; transform: translateY(-60px) rotate(-12deg); }
.mm-draw { transition: opacity .7s var(--k-ease) calc(var(--i) * 90ms), transform .8s var(--k-spring) calc(var(--i) * 90ms); }
.mm-deck.is-shuffling .mm-draw { animation: mm-shuffle .7s var(--k-ease) calc(var(--i) * 50ms); }
@keyframes mm-shuffle { 0%, 100% { transform: none; } 45% { transform: translate(calc((2.5 - var(--i)) * 40%), -20px) rotate(calc((var(--i) - 2.5) * 6deg)); } }

/* ---------------- shop ---------------- */
.mm-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.mm .mm-gal { display: grid; grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .mm-gal .gl-card { min-width: 0; }
.mm .mm-gal .gl-media img { width: 100%; height: 100%; object-fit: cover; }
.mm .gal-glass::before { background: radial-gradient(40% 32% at 20% 30%, rgba(163, 25, 47, .35), transparent 70%), radial-gradient(34% 28% at 80% 60%, rgba(201, 164, 92, .18), transparent 70%); }
.mm .gl-card { border-radius: 4px; }
.mm .gl-card::before { border-radius: 4px; background: linear-gradient(140deg, #E6CB8F, #9C7A3C 40%, #A3192F 75%, #E6CB8F); }
.mm .gal-glass .gl-media, .mm .gl-body { border-radius: 2px; }
.mm .gl-name { font-family: var(--k-serif); font-weight: 600; font-size: 1.35rem; letter-spacing: .01em; text-transform: none; }
.mm .gl-price { font-family: var(--k-serif); font-weight: 600; font-size: 1.3rem; color: var(--k-gold2); }
.mm .gal-glass .gl-by { color: var(--k-rose); }
.mm .gal-glass .gl-buy { border-radius: 2px; background: linear-gradient(135deg, #B8904A, #E6CB8F 45%, #C9A45C); color: #2A080E; font-family: var(--k-serif); font-weight: 600; letter-spacing: .06em; }
.mm .gal-glass .gl-buy:hover { background: var(--k-red); color: var(--k-champ); box-shadow: 0 8px 22px -8px rgba(163, 25, 47, .8); }
.mm .gl-chip i { background: var(--k-red); color: #fff; }
.mm-codes { padding: 26px 24px; }
.mm-codes h3 { margin: 4px 0 12px; font: 600 26px/1.1 var(--k-serif); color: var(--k-ivory); text-transform: none; }
.mm-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--k-line); }
.mm-code-label { display: block; font: 600 19px/1.2 var(--k-serif); color: var(--k-champ) !important; }
a.mm-code-label:hover { color: var(--k-gold2) !important; }
.mm-code-note { display: block; font-size: 12px; font-weight: 700; color: var(--k-muted); }
.mm-code-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 7px 7px 11px; border: 1px dashed var(--k-gold); border-radius: 2px; background: rgba(12, 5, 6, .6); color: var(--k-champ); font: 900 12px/1 'Nunito', system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; transition: background-color .3s, border-style .3s, transform .4s var(--k-spring); }
.mm-code-copy i { padding: 4px 7px; background: var(--k-gold); color: var(--k-oxblood); font-style: normal; font-size: 10px; text-transform: uppercase; }
.mm-code-copy:hover { background: var(--k-wine); border-style: solid; transform: scale(1.04); }
.mm-code-copy.is-copied i { background: var(--k-rose); color: #fff; }

/* ---------------- the den ---------------- */
.mm-den { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }
.mm-lounge { position: relative; isolation: isolate; overflow: hidden; padding: 50px 44px 42px; background:
    radial-gradient(80% 70% at 100% 0%, rgba(163, 25, 47, .45), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 14px, rgba(255, 255, 255, .02) 22px, rgba(0, 0, 0, .18) 30px),
    linear-gradient(160deg, #5C0F1E, #2A080E 70%);
  border: 1px solid var(--k-gold); box-shadow: 0 40px 80px -40px #000, inset 0 0 0 6px #2A080E, inset 0 0 0 7px var(--k-line2); }
.mm-lounge-chibi { position: absolute; z-index: -1; right: -40px; bottom: -40px; width: min(300px, 46%); height: auto; opacity: .95; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); animation: mm-hover 6.5s ease-in-out infinite; }
.mm-lounge-kick { font-size: 30px; color: var(--k-gold2); }
.mm-lounge h2 { margin: 6px 0 14px; max-width: 12ch; font: italic 600 clamp(40px, 5vw, 60px)/.98 var(--k-serif); color: var(--k-ivory); text-transform: none; }
.mm-lounge-text { max-width: 44ch; font-size: 16.5px; font-weight: 600; line-height: 1.75; color: var(--k-soft); }
.mm-lounge .mm-actions { margin-top: 24px; }
.mm-support-title { margin: 30px 0 12px; font: 600 20px/1 var(--k-serif); color: var(--k-champ); }
.mm-support-title span { font-style: italic; font-size: 15px; color: var(--k-muted); }
.mm-support { display: flex; flex-wrap: wrap; gap: 10px; max-width: 60%; }
.mm-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--k-line2); background: rgba(12, 5, 6, .45); font-weight: 800; font-size: 14px; color: var(--k-champ) !important; transition: background-color .3s, border-color .3s, transform .4s var(--k-spring); }
.mm-pill span { color: var(--k-gold); }
.mm-pill:hover { background: var(--k-gold); border-color: var(--k-gold); color: var(--k-oxblood) !important; transform: translateY(-3px); }
.mm-pill:hover span { color: var(--k-wine); }

/* A casino placard: double gold rule with corner notches. */
.mm-placard { position: relative; padding: 42px 34px 34px; background: linear-gradient(160deg, #1D0B0D, #110607); border: 1px solid var(--k-gold); box-shadow: inset 0 0 0 6px #110607, inset 0 0 0 7px var(--k-line2), 0 40px 80px -50px #000; }
.mm-placard::before, .mm-placard::after { content: '◆'; position: absolute; left: 50%; translate: -50% 0; font-size: 13px; color: var(--k-gold); background: #150809; padding: 0 10px; line-height: 1; }
.mm-placard::before { top: -7px; }
.mm-placard::after { bottom: -7px; }
.mm-placard-kick { font-size: 26px; color: var(--k-rose); text-align: center; }
.mm-placard h3 { margin: 2px 0 22px; font: italic 600 40px/1 var(--k-serif); color: var(--k-ivory); text-align: center; text-transform: none; }
.mm-rule-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--k-gold); }
.mm-rule-head::after { content: ''; flex: 1; height: 1px; background: var(--k-line); }
.mm-rule-head i { font-style: normal; font-size: 15px; color: var(--k-rose); }
.mm-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-rules li { position: relative; padding-left: 22px; font: 600 19px/1.3 var(--k-serif); color: var(--k-ivory); }
.mm-rules li::before { content: '♥'; position: absolute; left: 0; top: 2px; font-size: 13px; color: var(--k-red); }
.mm-rules--no li { color: var(--k-muted); }
.mm-rules--no li::before { content: '✕'; color: var(--k-gold); font-size: 12px; top: 4px; }
.mm-vr { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 12px; border: 1px solid var(--k-line); background: rgba(74, 13, 24, .25); }
.mm-vr img { width: 74px; height: 74px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--k-gold); }
.mm-vr p { font-size: 14px; font-weight: 600; color: var(--k-muted); }
.mm-vr b { display: block; font: 600 20px/1.1 var(--k-serif); color: var(--k-champ); }
.mm-credits { margin-top: 8px; }
.mm-credit { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dashed var(--k-line); font-size: 13.5px; }
.mm-credit span { font-weight: 700; color: var(--k-muted); }
.mm-credit b { font: 600 17px/1.2 var(--k-serif); color: var(--k-gold2); }

/* ---------------- join DRXP (shared markup, her colours) ---------------- */
.mm .cp-join { margin-top: 100px; }
.mm .cp-join-card { border-radius: 2px; background: linear-gradient(135deg, #6E1224, #2A080E 70%); border: 1px solid var(--k-gold); box-shadow: 0 30px 70px -30px #000, inset 0 0 0 6px #2A080E, inset 0 0 0 7px var(--k-line2); }
.mm .cp-join-card::before { content: '♠'; color: rgba(201, 164, 92, .12); }
.mm .cp-join-card h2 { font-family: var(--k-serif); font-style: italic; font-weight: 600; }
.mm .cp-kick { font-family: var(--k-serif); font-style: italic; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--k-gold2); }
.mm .cp-btn { border-radius: 2px; font-family: var(--k-serif); font-weight: 600; font-size: 17px; }
.mm .cp-btn-white { background: linear-gradient(135deg, #B8904A, #E6CB8F 45%, #C9A45C); color: #2A080E; }
.mm .cp-num { border-radius: 2px; }
.mm .cp-num b { font-family: var(--k-serif); color: var(--k-gold2); }

.mm-toast { position: fixed; z-index: 95; left: 50%; bottom: 28px; padding: 12px 22px; border: 1px solid var(--k-gold); background: #2A080E; color: var(--k-champ); font: italic 600 18px/1 var(--k-serif); box-shadow: 0 18px 40px -14px #000; opacity: 0; transform: translate(-50%, 20px); transition: opacity .35s var(--k-ease), transform .5s var(--k-spring); pointer-events: none; }
.mm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- header: maroon and gold ---------------- */
body.cp-theme-mommymaple .cpnav { font-family: 'Cormorant Garamond', 'Georgia', serif; }
body.cp-theme-mommymaple .cpnav-in { background: rgba(22, 8, 9, .66); border-color: rgba(201, 164, 92, .3); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(230, 203, 143, .12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-mommymaple .cpnav-in { background: rgba(22, 8, 9, .96); } }
.perf-lite body.cp-theme-mommymaple .cpnav-in { background: rgba(22, 8, 9, .96); }
body.cp-theme-mommymaple .cpnav-who { color: #F3E3BD; font-weight: 600; font-style: italic; font-size: 1.15rem; border-left-color: rgba(201, 164, 92, .25); }
body.cp-theme-mommymaple .cpnav-av { border-color: #C9A45C; box-shadow: 0 0 12px -4px #C9A45C; }
body.cp-theme-mommymaple .cpnav-av img { object-position: 50% 10%; transform-origin: 50% 10%; transform: scale(1.5); }
body.cp-theme-mommymaple .cpnav-links a { color: #E2D2C6; font-weight: 600; font-size: 1.05rem; letter-spacing: .03em; }
body.cp-theme-mommymaple .cpnav-links a:hover { color: #E6CB8F; background: rgba(201, 164, 92, .08); }
body.cp-theme-mommymaple .cpnav-links a[aria-current="true"] { background: linear-gradient(135deg, #6E1224, #A3192F); color: #F3E3BD; box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .6); }
body.cp-theme-mommymaple .cpnav-cart { background: linear-gradient(135deg, #B8904A, #E6CB8F 45%, #C9A45C); color: #2A080E; box-shadow: 0 8px 18px -10px #C9A45C; }
body.cp-theme-mommymaple .cpnav-cart:hover { background: #A3192F; color: #F3E3BD; }
body.cp-theme-mommymaple .cpnav-account { background: rgba(201, 164, 92, .1); color: #E6CB8F; }
body.cp-theme-mommymaple .cpnav-account:hover { background: #C9A45C; color: #2A080E; }
body.cp-theme-mommymaple .cpnav-burger { background: rgba(201, 164, 92, .1); }
body.cp-theme-mommymaple .cpnav-burger span { background: #E6CB8F; }
body.cp-theme-mommymaple .srch { --srch-acc: #C9A45C; --srch-acc-soft: rgba(201, 164, 92, .16); --srch-bg: rgba(22, 8, 9, .94); }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .mm-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-row { grid-auto-columns: minmax(280px, calc((100% - 40px) / 3)); }
}
@media (max-width: 1024px) {
  .mm-about, .mm-den { grid-template-columns: 1fr; }
  .mm-side { grid-template-columns: 1fr 1fr; align-items: center; }
  .mm-shop { grid-template-columns: 1fr 1fr; }
  .mm .mm-gal { grid-column: 1 / -1; }
  .mm-codes { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .mm-hero { min-height: 0; padding: 150px 0 70px; }
  .mm-hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .mm-hero-shade { background: linear-gradient(180deg, rgba(12, 5, 6, .8), rgba(42, 8, 14, .82) 50%, var(--k-void) 100%); }
  .mm-hero-card { width: min(290px, 78%); margin-bottom: 30px; }
  .mm-dossier { padding: 40px 24px 32px; }
  .mm-stamp { top: 18px; right: 16px; font-size: 12px; }
  .mm-side { grid-template-columns: 1fr; }
  .mm-sec { padding-top: 76px; }
  .mm-vods { grid-template-columns: 1fr; }
  .mm-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mm .mm-gal { grid-template-columns: 1fr 1fr; }
  .mm-lounge { padding: 42px 24px 34px; }
  .mm-support { max-width: 100%; }
  .mm-lounge-chibi { width: 160px; right: -26px; bottom: auto; top: -20px; opacity: .5; }
  .mm-crow { width: calc(60px * var(--scale)); }
}
@media (max-width: 560px) {
  .mm .mm-gal, .mm-shop { grid-template-columns: 1fr; }
  .mm-actions .mm-btn { flex: 1 1 auto; justify-content: center; }
  .mm-row { grid-auto-columns: 84%; }
  .mm-row--tall { grid-auto-columns: 62%; }
  .mm-chip-stat { width: 80px; height: 80px; }
  .mm-chip-stat b { font-size: 21px; }
  .mm-band span { font-size: 19px; }
  .mm-placard { padding: 36px 20px 28px; }
  .mm-tagline { letter-spacing: .2em; }
  .mm-tagline::before, .mm-tagline::after { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm *, .mm *::before, .mm *::after { animation: none !important; transition: none !important; }
  .mm-curtain, .mm-crows, .mm-dust { display: none; }
  .cp-js .mm [data-reveal]:not(.is-in) { opacity: 1; transform: none; filter: none; }
  .cp-js .mm-deck:not(.is-dealt) .mm-draw { opacity: 1; transform: none; }
}
.perf-lite .mm-hero-img, .perf-lite .mm-dust i, .perf-lite .mm-crow, .perf-lite .mm-crow svg, .perf-lite .mm-band-track, .perf-lite .mm-name span, .perf-lite .mm-title em,
.perf-lite .mm-playing, .perf-lite .mm-float-suit, .perf-lite .mm-charm img, .perf-lite .mm-lounge-chibi { animation: none; }
.perf-lite .mm-dust, .perf-lite .mm-crows { display: none; }

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