/* =============================================================
   MilkVT — the milk page.

   Her art sets the palette and nothing else does: cream and
   off-white from the carton, the charcoal of a cow spot, the pink
   of her bows, the gold of her cowbell, the pale blue of the
   carton in her hand, and the coral her portrait sits on.

   This page runs LIGHT while the rest of the site is dark, so
   every colour is declared here rather than inherited — the theme
   is scoped to .cp-theme-milkvt on <body> so it cannot leak.
   ============================================================= */

body.cp-theme-milkvt {
  --mk-cream: #FFFBF3;
  --mk-milk:  #FFFFFF;
  --mk-ink:   #2B2724;
  --mk-ink2:  #5C544D;
  --mk-ink3:  #8A8078;
  --mk-pink:  #F6A8BC;
  --mk-pink2: #FDE4EB;
  --mk-gold:  #F2B93B;
  --mk-sky:   #BCD8F2;
  --mk-coral: #F4685F;
  --mk-line:  #EDE3D6;

  background: var(--mk-cream);
  color: var(--mk-ink);
}

/* The shared partner-page shell assumes a dark site. Re-point the few
   tokens it paints with, so headings, cards and the join band come out
   light here without every rule below having to override them. */
body.cp-theme-milkvt .cp {
  --bg: var(--mk-cream);
  --bg2: var(--mk-milk);
  --panel: var(--mk-milk);
  --tx: var(--mk-ink);
  --tx2: var(--mk-ink2);
  --tx3: var(--mk-ink3);
  --line: var(--mk-line);
  --acc: var(--mk-pink);
  /* No background of its own: body carries the cream and the texture layer
     sits between the two. A background here would cover it. */
  background: none;
  color: var(--mk-ink);
  overflow-x: clip;
}

/* ---------------------------------------------------------- the texture */
/* Fixed to the viewport, so it does not scroll with the page at all; the
   script then pushes it down at a fraction of the scroll, which is what
   makes it drift rather than sit still. Very low opacity on purpose: this
   is paper, not wallpaper, and the type on top of it has to stay the
   blackest thing on the page.
   Without the script it simply stays put, which is a perfectly good
   background and is what reduced-motion readers get. */
.mk-paper {
  /* One tile. The script reads this rather than being told separately, so
     the wrap distance and the pattern can never drift apart. */
  --mk-tile: 600px;

  position: fixed; left: 0; right: 0;
  /* A WHOLE number of pixels, not -8vh. The background's tiles are laid out
     from this element's top-left corner, so a fractional top puts every
     tile edge on a fraction of a device pixel — the browser then rounds
     each edge independently, the roundings disagree, and a hairline opens
     along every seam. One tile up is both integral and a useful amount of
     headroom.

     The height has to cover the viewport plus the whole distance it can
     travel, or its bottom edge climbs into view as a hard line that slides
     up the page. It starts one tile high and moves up by at most one more,
     so it needs two tiles of slack, plus a little. */
  top: calc(-1 * var(--mk-tile));
  height: calc(100vh + var(--mk-tile) * 2 + 120px);
  z-index: 0; pointer-events: none;
  /* Strong enough to see. At .05 a spot lands 11 steps off the cream,
     which on a wide screen showing one or two spots reads as nothing at
     all. .085 puts it 18 steps off — still paper rather than wallpaper,
     but the page is visibly printed on something. */
  opacity: .085;
  /* Versioned in the FILE NAME, not a query. This is served with a
     one-year max-age and referenced from a stylesheet, so a browser that
     cached the first copy would keep it for a year — and the first copy
     had a one-unit transparent gutter that drew a grid across the page.
     A new name is the only cache-bust a CSS url() can rely on. */
  background-image: url("/assets/img/creators/milkvt/spots-tile-v2.svg");
  background-repeat: repeat;
  background-size: var(--mk-tile) var(--mk-tile);
  will-change: transform;
}
/* Everything else on the page sits above it. */
.mk > *:not(.mk-paper) { position: relative; z-index: 1; }

.mk .mk-kick {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mk-ink3); margin-bottom: 6px;
}
.mk .mk-title {
  font-family: var(--head); font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: .98; color: var(--mk-ink); text-transform: uppercase;
}
.mk .mk-title span { color: var(--mk-pink); }
.mk .mk-note { font-size: .9rem; color: var(--mk-ink2); }
.mk .mk-note b { color: var(--mk-ink); }

.mk-sec { padding: 68px 0; }
.mk-sec--tint {
  /* Translucent, so the spots carry through at roughly half strength.
     That is the point of the band rather than a side effect: the pattern
     reads in two tones down the page — full on the cream, faint on these —
     which is what makes it feel like one printed sheet instead of stripes
     of pattern and stripes of nothing. Opaque here kills the second tone
     and the texture looks like it has gone missing. */
  background: rgba(255, 255, 255, .34);
  border-block: 1px solid var(--mk-line);
}
.mk-sec-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 28px;
}

/* ---------------------------------------------------------------- hero */
.mk-hero { position: relative; padding: 116px 0 0; overflow: hidden; }
.mk-hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 30px;
  padding-bottom: 54px;
}
.mk-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--mk-pink2); border: 1px solid var(--mk-pink);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #8C4257;
}
.mk-bell { display: inline-block; animation: mk-ring 3.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes mk-ring {
  0%, 74%, 100% { transform: rotate(0); }
  78% { transform: rotate(16deg); }
  82% { transform: rotate(-13deg); }
  86% { transform: rotate(9deg); }
  90% { transform: rotate(-5deg); }
}
.mk-name {
  font-family: var(--head); font-size: clamp(3.2rem, 11vw, 7rem); line-height: .86;
  /* The gap scales with the type, because the type scales with the window.
     A line-height under 1 makes the line box shorter than the letters, so
     the capitals rise above the margin box and eat any fixed gap — at 7rem
     the old 14px was gone entirely and the pill was sitting on the M. */
  margin: clamp(24px, 4.2vw, 46px) 0 14px;
  text-transform: uppercase; color: var(--mk-ink);
  text-shadow: 3px 3px 0 var(--mk-milk), 6px 6px 0 var(--mk-pink2);
}
.mk-lede { max-width: 46ch; font-size: 1.1rem; line-height: 1.66; color: var(--mk-ink2); }
.mk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.mk-tag {
  padding: 6px 13px; border-radius: 999px; font-size: .82rem;
  background: var(--mk-milk); border: 1px solid var(--mk-line); color: var(--mk-ink2);
}
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk .mk-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 800; letter-spacing: .02em;
  background: var(--mk-ink); color: var(--mk-cream); border: 2px solid var(--mk-ink);
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.mk-btn svg { width: 18px; height: 18px; fill: currentColor; }
.mk .mk-btn:hover { transform: translateY(-2px); background: var(--mk-pink); border-color: var(--mk-pink); color: var(--mk-ink); }
.mk .mk-btn--soft { background: var(--mk-milk); color: var(--mk-ink); border-color: var(--mk-ink); }
.mk .mk-btn--soft:hover { background: var(--mk-pink2); border-color: var(--mk-pink); }
.mk-share { display: inline-flex; gap: 6px; }
.mk-share button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--mk-milk); border: 2px solid var(--mk-line); color: var(--mk-ink2);
  font-size: 1rem; transition: border-color .16s ease, color .16s ease;
}
.mk-share button:hover { border-color: var(--mk-pink); color: var(--mk-ink); }

.mk-hero-art { position: relative; justify-self: center; max-width: 440px; }
.mk-hero-art img { position: relative; z-index: 2; display: block; width: 100%; height: auto; animation: mk-bob 6s ease-in-out infinite; }
.mk-splat-bg {
  position: absolute; inset: 6% -10% -6% -10%; z-index: 1; border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 42% 38%, var(--mk-pink2), var(--mk-milk) 62%);
  animation: mk-blob 14s ease-in-out infinite;
}
@keyframes mk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mk-blob {
  0%, 100% { border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; }
  50% { border-radius: 56% 44% 58% 42% / 44% 56% 42% 58%; }
}

/* ---- the milk-pour backdrop (only when a clip has been uploaded) ---- */
.mk-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--mk-cream); }
.mk-backdrop video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  /* Held back until it is playing, so a poster-less clip cannot flash black
     over a cream page while it buffers. */
  opacity: 0; transition: opacity .8s ease;
}
.mk-hero.is-playing .mk-backdrop video { opacity: 1; }

/* The scrim is not decoration: the clip is white milk and the copy is dark
   ink on cream, so without it the headline sits on moving highlights and the
   contrast changes frame to frame. Heaviest on the left, where the words
   are, and thinner on the right where her portrait sits. */
.mk-backdrop-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--mk-cream) 0 26%, rgba(255, 251, 243, .82) 46%, rgba(255, 251, 243, .5) 68%, rgba(255, 251, 243, .66) 100%),
    linear-gradient(to bottom, rgba(255, 251, 243, .7), rgba(255, 251, 243, .25) 40%, var(--mk-cream) 96%);
}

/* With a clip behind it the floating cartons are noise on noise. */
.mk-hero.has-video .mk-floats { opacity: .45; }

/* Things drifting up past the hero. */
.mk-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mk-float {
  position: absolute; left: var(--x); bottom: -14%; width: var(--s); height: var(--s);
  animation: mk-rise var(--t) linear var(--d) infinite;
  opacity: 0;
}
.mk-float--carton {
  background:
    linear-gradient(160deg, var(--mk-sky) 0 55%, #A6C9E8 55% 100%);
  clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%);
  border-radius: 3px;
}
.mk-float--heart {
  background: var(--mk-pink);
  clip-path: path('M12 21s-9-5.7-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.3-9 12-9 12z');
  /* the path is authored at 24px; scale it to the token size */
  transform-origin: 50% 50%;
}
.mk-float--spot { background: var(--mk-ink); border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%; opacity: 0; }
@keyframes mk-rise {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  8% { opacity: .32; }
  92% { opacity: .18; }
  100% { transform: translateY(-112vh) rotate(220deg); opacity: 0; }
}

/* The poured edge under the hero. */
.mk-pour { position: relative; z-index: 2; margin-top: -1px; line-height: 0; }
.mk-pour svg { display: block; width: 100%; height: clamp(46px, 6vw, 90px); }
.mk-pour path { fill: var(--mk-milk); }

/* ------------------------------------------------------------- marquee */
.mk-band {
  background: rgba(255, 255, 255, .45); border-bottom: 1px solid var(--mk-line);
  padding: 14px 0; overflow: hidden;
}
.mk-band-track {
  display: flex; align-items: center; gap: 22px; width: max-content;
  animation: mk-scroll 34s linear infinite;
  font-family: var(--head); font-size: 1.1rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mk-ink);
}
.mk-band-track b { color: var(--mk-pink); font-size: .9em; }
@keyframes mk-scroll { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- about */
.mk-about { display: grid; grid-template-columns: 340px 1fr; gap: 42px; align-items: start; }
.mk-about-copy p { color: var(--mk-ink2); line-height: 1.75; margin-bottom: 14px; max-width: 62ch; }
.mk-about-copy .mk-title { margin-bottom: 16px; }

/* Her portrait, served as a carton. */
/* The folded carton top that used to sit above this is gone. It was a
   triangle made with clip-path over a bordered box, and clip-path cuts the
   border too — so the shape arrived with its outline sliced off on two
   sides and a bare white wedge poking above the picture. A frame that
   cannot be drawn cleanly is better not drawn. */
.mk-carton { position: relative; margin-top: 26px; }
.mk-carton img {
  display: block; width: 100%; height: auto;
  border: 9px solid var(--mk-pink);
  border-radius: 16px;
  background: var(--mk-pink);
}
/* One shake per hover, not a loop: this is a picture reacting to the
   cursor, not something demanding attention. */
.mk-carton:hover img,
.mk-carton:focus-within img { animation: mk-shake .55s ease-in-out; }

@keyframes mk-shake {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  12% { rotate: -2.4deg; translate: -4px 0; }
  28% { rotate: 2.1deg; translate: 4px 0; }
  44% { rotate: -1.5deg; translate: -3px 0; }
  62% { rotate: 1.1deg; translate: 2px 0; }
  82% { rotate: -.5deg; translate: -1px 0; }
}
.mk-carton figcaption {
  margin-top: 10px; text-align: center; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mk-ink3);
}

/* The facts, as the side of a carton. */
.mk-label {
  margin-top: 26px; padding: 18px 20px; max-width: 420px;
  background: var(--mk-milk); border: 2px solid var(--mk-ink); border-radius: 6px;
}
.mk-label-head {
  font-family: var(--head); font-size: 1.5rem; text-transform: uppercase;
  border-bottom: 6px solid var(--mk-ink); padding-bottom: 4px; margin-bottom: 4px;
}
.mk-label-sub { font-size: .8rem; color: var(--mk-ink3); padding-bottom: 8px; border-bottom: 1px solid var(--mk-line); }
.mk-label dl { margin: 0; }
.mk-label dl > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--mk-line);
}
.mk-label dt { font-weight: 800; color: var(--mk-ink); }
.mk-label dd { margin: 0; color: var(--mk-ink2); text-align: right; }
.mk-label-foot { margin-top: 10px; font-size: .76rem; line-height: 1.5; color: var(--mk-ink3); }

/* ------------------------------------------------------------- cartons */
/* One carton per platform, the count printed on the side of it. The shape
   is a <symbol> used five times rather than five copies of the same paths.
   The drawing carries classes instead of its original fills, so it wears
   her palette — pink cap, milk body — rather than the icon's grey and lilac. */
.mk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.mk-cartons { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px; }

.mk .mk-carton-stat {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 550 / 550;
  transition: transform .2s ease;
}
.mk .mk-carton-stat:hover,
.mk .mk-carton-stat:focus-visible { transform: translateY(-6px) rotate(-1.5deg); }

.mk-carton-svg { display: block; width: 100%; height: 100%; }
.mk-cn-body { fill: var(--mk-milk); }
.mk-cn-roof { fill: #EFE9DE; }
.mk-cn-cap  { fill: var(--mk-pink); }
.mk-cn-line { fill: var(--mk-ink); }
.mk .mk-carton-stat:hover .mk-cn-body { fill: var(--mk-pink2); }

/* The label sits inside the body panel of the drawing, not over the whole
   box: the body is 21%-79% across and 21%-97% down the 550x550 viewBox, so
   the text is inset to match and cannot ride up onto the roof. */
.mk-carton-face {
  position: absolute; left: 22.5%; right: 22.5%; top: 26%; bottom: 8%;
  display: grid; align-content: center; justify-items: center; gap: 4px;
  text-align: center; pointer-events: none;
}
.mk-carton-face b {
  font-family: var(--head); font-size: clamp(1.4rem, 3.6vw, 2.1rem); line-height: 1;
  color: var(--mk-ink);
}
.mk-carton-face span {
  /* Tight tracking on purpose: "Instagram" is the longest label and the
     body panel is only 57% of the card's width, so wide letter-spacing is
     what would push it onto a second line. */
  font-size: clamp(.58rem, 1.35vw, .74rem); letter-spacing: .04em;
  text-transform: uppercase; color: var(--mk-ink2); line-height: 1.25;
}
.mk-asof { margin-top: 14px; font-size: .8rem; color: var(--mk-ink3); }

/* --------------------------------------------------------------- moods */
/* One face, and a press turns it to the next. A grid of every expression
   shows you the whole set at once and is over; one at a time makes finding
   the next one the point, which is what an expression sheet is actually
   for.

   Every frame is in the markup and stacked on top of each other, so the
   turn always has somewhere to land — nothing is fetched mid-gesture and
   the box cannot show a gap on a slow connection. */
.mk-moodbox-wrap {
  position: relative; display: grid; justify-items: center;
  padding: 10px 0 4px;
}

.mk-moodbox {
  position: relative; z-index: 2;
  width: min(72vw, 380px); aspect-ratio: 1000 / 833;
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 900px;
}
.mk-moodbox-card {
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: rotate .18s ease-in, scale .18s ease-in;
}
.mk-moodbox-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; visibility: hidden;
  filter: drop-shadow(0 12px 16px rgba(43, 39, 36, .18));
}
.mk-moodbox-img.is-on { opacity: 1; visibility: visible; }

/* The turn: away from you to edge-on, the face is swapped at that moment,
   then back. Two halves rather than one 180deg spin, because the art is not
   double-sided — turning it all the way round would show it mirrored. */
.mk-moodbox.is-turning .mk-moodbox-card { rotate: y 90deg; scale: .94; }
.mk-moodbox.is-returning .mk-moodbox-card {
  rotate: y 0deg; scale: 1;
  transition: rotate .22s cubic-bezier(.2, .9, .3, 1.4), scale .22s ease-out;
}
.mk-moodbox:hover .mk-moodbox-card { scale: 1.03; }
.mk-moodbox:focus-visible { outline: 3px solid var(--mk-pink); outline-offset: 10px; border-radius: 18px; }

.mk-moodbox-label {
  margin-top: 10px; font-family: var(--head); font-size: 1.5rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mk-ink);
}
.mk-moodbox-hint {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mk-ink3);
}

/* -- the hearts, behind her -- */
/* Behind the card on purpose: they are a reaction to the press, not
   confetti thrown over her face. */
.mk-hearts {
  position: absolute; left: 50%; top: 44%; z-index: 1;
  width: 0; height: 0; pointer-events: none;
}
.mk-heart {
  position: absolute; left: 0; top: 0;
  width: var(--sz); height: var(--sz);
  background: var(--mk-pink);
  clip-path: path("M12 21S3 15.3 3 9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.3-9 12-9 12z");
  /* the clip path is authored on a 24px box; scale it to whatever --sz is */
  scale: calc(var(--sz) / 24px);
  transform-origin: 0 0;
  animation: mk-burst var(--dur) cubic-bezier(.15, .7, .3, 1) forwards;
  opacity: 0;
}
@keyframes mk-burst {
  0%   { translate: 0 0; opacity: 0; rotate: 0deg; }
  14%  { opacity: .95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; rotate: var(--spin); }
}

@media (max-width: 640px) {
  .mk-moodbox { width: min(78vw, 300px); }
  .mk-moodbox-label { font-size: 1.25rem; }
}

/* The two loose ones pinned elsewhere on the page. */
.mk-tack {
  position: absolute; width: clamp(74px, 9vw, 116px); height: auto; pointer-events: none;
  filter: drop-shadow(2px 0 0 var(--mk-milk)) drop-shadow(-2px 0 0 var(--mk-milk))
          drop-shadow(0 2px 0 var(--mk-milk)) drop-shadow(0 -2px 0 var(--mk-milk))
          drop-shadow(0 8px 12px rgba(43, 39, 36, .18));
}
.mk-tack--shop { right: -6px; bottom: -56px; rotate: 9deg; z-index: 2; }

/* Beside the heading, in the empty half of that line, and beating. The
   heartbeat is two knocks and a rest rather than an even pulse — an evenly
   breathing icon reads as a loading spinner, not as a heart. */
.mk-community-head { position: relative; }
.mk-tack--love {
  right: 16%; top: 50%; translate: 0 -50%; rotate: -11deg;
  animation: mk-beat 1.9s ease-in-out infinite;
}
@keyframes mk-beat {
  0%, 62%, 100% { scale: 1; }
  10% { scale: 1.13; }
  22% { scale: 1; }
  32% { scale: 1.07; }
  44% { scale: 1; }
}
@media (max-width: 860px) { .mk-tack { display: none; } }

/* --------------------------------------------------------------- watch */
/* Her Twitch archive and her YouTube, as one grid. Nothing third-party is
   loaded until somebody presses a card: each is a local thumbnail that links
   straight out, and creator-media.js swaps in the platform's own player on
   press. A page with sixteen videos that quietly loaded sixteen players
   would cost more than the rest of the page put together. */
.mk-watch {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.mk-watch-card {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--mk-milk); border: 1px solid var(--mk-line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mk-watch-card:hover,
.mk-watch-card:focus-within {
  transform: translateY(-4px); border-color: var(--mk-pink);
  box-shadow: 0 18px 34px -22px rgba(43, 39, 36, .4);
}
.mk-watch-player { position: relative; }
.mk-watch-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--mk-cream); overflow: hidden; text-decoration: none;
}
.mk-watch-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-watch-blank { display: grid; place-items: center; height: 100%; font-size: 2rem; }
.mk-watch-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(255, 251, 243, .92);
  border: 2px solid var(--mk-ink); color: var(--mk-ink);
  font-size: .9rem; padding-left: 3px;
  transition: scale .2s ease, background .2s ease;
}
.mk-watch-card:hover .mk-watch-play { scale: 1.12; background: var(--mk-pink); }
.mk-watch-len {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(43, 39, 36, .84); color: var(--mk-cream);
  font-size: .72rem; font-variant-numeric: tabular-nums;
}
.mk-watch-meta { padding: 12px 14px 14px; }
.mk-watch-chip {
  display: inline-block; margin-bottom: 7px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--mk-pink2); color: #8C4257;
}
.mk-watch-chip--youtube { background: #FBE2E2; color: #9B2B2B; }
.mk-watch-chip--tiktok { background: #E4F4F6; color: #1F6B73; }
.mk-watch-meta h3 {
  font-size: .95rem; line-height: 1.35; color: var(--mk-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-watch-meta p { margin-top: 5px; font-size: .78rem; color: var(--mk-ink3); }
.mk-watch-more { margin-top: 18px; text-align: center; font-size: .92rem; }
.mk .mk-watch-more a { color: var(--mk-ink2); }
.mk .mk-watch-more a:hover { color: #B0526F; }

/* ----------------------------------------------------------------- shop */
.mk-gal { margin-top: 4px; }
/* -- the product cards, in her colours -- */
/* glass-cards.css is built for the dark site: a white-alpha tile over black,
   a near-black panel, and an orange/violet glow behind the grid. On cream
   every one of those reads as a hole cut in the page — which is exactly
   what the black slab under the mug looked like.

   Re-tinted here rather than in glass-cards.css, and scoped to her page, so
   every other partner's cards are untouched. The structure, the hover lift
   and the button-in-the-drawer all stay; only the colours move. */

/* The ambient light behind the grid: her pink and gold instead of the
   site's orange and violet. */
.mk .gal-glass::before {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(246, 168, 188, .34), transparent 70%),
    radial-gradient(34% 28% at 82% 48%, rgba(242, 185, 59, .2), transparent 70%),
    radial-gradient(40% 30% at 42% 88%, rgba(188, 216, 242, .26), transparent 70%);
}

/* The tile: milk over cream, not white-alpha over black. */
.mk .gl-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 251, 243, .86));
  border: 1px solid var(--mk-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 20px 40px -26px rgba(43, 39, 36, .34);
}
.mk .gl-card:hover,
.mk .gl-card:focus-within {
  border-color: var(--mk-pink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 28px 50px -26px rgba(43, 39, 36, .4);
}

/* The photo sits on milk while it loads, not on near-black. */
.mk .gal-glass .gl-media { background: var(--mk-milk); }

/* The panel. This is the black slab: milk with a pink edge instead. */
.mk .gl-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 251, 243, .97));
  border: 1px solid var(--mk-pink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 26px -18px rgba(43, 39, 36, .34);
}

/* "by MilkVT" was her accent pink on black. On a white panel that pink is
   far too pale to read as text, so the credit line takes a deeper pink that
   still belongs to the same family. */
.mk .gl-by { color: #B0526F; }
.mk .gl-name a { color: var(--mk-ink); }
.mk .gl-name a:hover { color: #B0526F; }
.mk .gl-price { color: var(--mk-ink); }
.mk .gl-price s { color: var(--mk-ink3); }

/* The buy button: her ink and pink rather than the site's orange, and it
   keeps the gold for the hover so there is still somewhere brighter to go. */
.mk .gal-glass .gl-buy {
  background: var(--mk-ink); color: var(--mk-cream);
}
.mk .gal-glass .gl-buy:hover {
  background: linear-gradient(135deg, var(--mk-pink), #F8C6D5);
  color: var(--mk-ink);
  box-shadow: 0 8px 22px -8px rgba(246, 168, 188, .8);
}

.mk-empty {
  padding: 34px; text-align: center; border-radius: 18px;
  background: var(--mk-cream); border: 2px dashed var(--mk-line); color: var(--mk-ink2);
}

/* ----------------------------------------------------------- how it poured
   The timeline printed on the front of the carton, the facts panel beside
   it. Two columns that become one when there is no room for both. */
.mk-poured {
  display: grid;
  /* The carton's column is capped at the carton's own width. As a fraction
     it was half the wrap, so the carton floated in the middle of a column
     far wider than itself and the gap to the facts card read as a hole. */
  grid-template-columns: minmax(240px, 400px) minmax(0, 1fr);
  gap: 44px;
  /* Centred on each other, not both hung from the top: the carton is much
     the taller of the two, so top-aligning left the card stranded up by the
     roof with nothing beside its lower half. */
  align-items: center;
}

/* The frame hugs the drawing. Exported at 0 0 550 550 the carton used only
   the middle 59% of the width — a fifth of the box was empty on each side —
   so it was drawn small and its label panel came out a narrow slot with
   cramped type in it. Cropped to the artwork (viewBox 105 8 339 534) the
   same carton fills the frame, and the panel goes from 28% of the figure's
   width to 46% without the carton itself changing at all. */
.mk-pack { position: relative; margin: 0 auto; width: 100%; max-width: 400px; aspect-ratio: 339 / 534; }
.mk-pack-svg { display: block; width: 100%; height: 100%; }

/* The carton in her colours rather than the icon's lilacs: milk front, lit
   top, pink sides, and the fold between them darker so the corner reads. */
.mk3-front { fill: var(--mk-milk); }
.mk3-top { fill: #F7F2E8; }
.mk3-side { fill: var(--mk-pink); }
.mk3-shoulder { fill: #E3B7C6; }
.mk3-flap { fill: var(--mk-pink); }
.mk3-rim { fill: #8A6472; }
.mk3-line { fill: var(--mk-ink); }

/* Inset to the FRONT PANEL, not to the card. That panel is a leaning
   quadrilateral — left and right edges vertical, top and bottom sloping
   down to the right — so the safe box is the rectangle inside all four:
   x 118-274, y 170-493 of the 550 viewBox. Centring on the card instead
   would put the first date out on the tabletop. */
.mk-pack-face {
  /* The same safe rectangle as before, restated against the cropped box. */
  position: absolute; left: 3.9%; right: 50.2%; top: 30.4%; bottom: 9.2%;
  list-style: none; margin: 0; padding: 0 0 0 4%;
  /* Evenly, not pushed to the ends: space-between pinned the first and last
     entries to the panel's edges and left four gaps bigger than the type,
     which is what made a full panel look half empty. */
  display: grid; align-content: space-evenly;
}
.mk-pack-face li { position: relative; padding-left: 16px; }
.mk-pack-face b {
  display: block; font-family: var(--head);
  font-size: clamp(.9rem, 1.9vw, 1.12rem); letter-spacing: .03em;
  line-height: 1.12; color: var(--mk-ink);
}
.mk-pack-face li > span:not(.mk-drop) {
  display: block; font-size: clamp(.7rem, 1.45vw, .84rem);
  line-height: 1.35; color: var(--mk-ink2); margin-top: 1px;
}
/* The drip down the side of the printed panel. */
.mk-pack-face::before {
  content: ""; position: absolute; left: calc(4% + 5px); top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: linear-gradient(var(--mk-pink), var(--mk-sky));
}
.mk-drop {
  position: absolute; left: 0; top: 3px; width: 12px; height: 12px;
  background: var(--mk-milk); border: 2px solid var(--mk-pink);
  border-radius: 50% 50% 50% 0; rotate: -45deg;
}

/* Beside the carton the panel is a column of its own, so it drops the
   margin and ceiling it needed when it sat under her bio. */
.mk-poured .mk-label { margin-top: 0; max-width: none; }

@media (max-width: 860px) {
  .mk-poured { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .mk-poured .mk-label { max-width: 460px; }
}

/* --------------------------------------------------------------- fridge */
/* The outer box does NOT clip: the pourers hang off its edges. The margin
   is the room they hang into, so they never collide with the section above
   or the caption below. */
.mk-fridge {
  position: relative; aspect-ratio: 5 / 4;
  max-width: 760px; margin: 0 auto; padding: 0;
}
/* Everything that must stay square-edged lives in here, and this is what
   clips. Splitting the two is the only way to have a panel with a hard
   edge and things sticking out of it. */
.mk-fridge-panel {
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px;
  border: 2px solid var(--mk-ink); background: var(--mk-cream);
}
@media (max-width: 620px) { .mk-fridge { aspect-ratio: 4 / 5; } }

.mk-fridge-cover {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 26px; text-align: center;
  background: var(--mk-cream);
  transition: opacity .45s ease .25s, visibility .45s ease .25s;
}
/* Her spill pattern, tiled over the whole cover. It is the cover: at this
   density nothing behind it can be made out, which is the job. */
.mk-spill {
  position: absolute; inset: 0; opacity: .34;
  background-image: url("/assets/img/creators/milkvt/spots.svg");
  background-repeat: repeat;
  background-size: 300px 300px;
}
.mk-warn {
  position: relative; font-family: var(--head); font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1; color: var(--mk-ink);
}
.mk-warn span { color: var(--mk-pink); }
.mk-warn-sub { position: relative; max-width: 34ch; font-size: .95rem; line-height: 1.6; color: var(--mk-ink2); }

/* -- the two pourers, hanging off the panel -- */
/* They break the edge on purpose: half on the panel, half off it, at
   different heights and different distances out, so they read as two things
   floating beside the box rather than one symmetrical pair of buttons
   printed on it. Either one opens it; whichever is pressed is the one that
   tips.
   The float is on `translate` and the lean is on `rotate`, which are
   separate properties — so one can be animated while the other is not,
   without either having to know about the other. */
.mk-pourer {
  position: absolute; z-index: 5;
  width: clamp(116px, 30%, 216px); aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 62% 78%;
  filter: drop-shadow(0 16px 20px rgba(43, 39, 36, .26));
  animation: mk-hover 5.5s ease-in-out infinite;
  transition: rotate .22s ease, scale .22s ease, filter .22s ease;
}
.mk-pourer img { display: block; width: 100%; height: auto; }

/* Low and far out on the left, high and less far out on the right. */
.mk-pourer--left  { left: -9%; bottom: 2%; rotate: -10deg; animation-delay: 0s; }
.mk-pourer--right { right: -5%; top: 4%; rotate: 9deg; transform-origin: 38% 78%; animation-delay: -2.6s; }

.mk-pourer:hover, .mk-pourer:focus-visible {
  scale: 1.09; filter: drop-shadow(0 22px 26px rgba(43, 39, 36, .32));
}
.mk-pourer--left:hover,  .mk-pourer--left:focus-visible  { rotate: -20deg; }
.mk-pourer--right:hover, .mk-pourer--right:focus-visible { rotate: 19deg; }

@keyframes mk-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -15px; }
}

.mk-pourer-hint {
  position: absolute; bottom: -26px; left: 50%; translate: -50% 0;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mk-ink3);
}

/* The pour. Only the one that was pressed tips over, and the float is
   switched off for it — a paused float would pin `translate` where it
   happened to be and fight the pour for the same property. */
.mk-fridge.is-pouring .mk-pourer {
  animation: none;
  transition: rotate .7s cubic-bezier(.5, -.2, .3, 1.4), translate .7s ease, opacity .3s ease;
}
.mk-fridge.is-pouring.from-left  .mk-pourer--left  { rotate: 100deg; translate: 22% -14%; }
.mk-fridge.is-pouring.from-right .mk-pourer--right { rotate: -100deg; translate: -22% 18%; }
/* The one that was not pressed gets out of the way. */
.mk-fridge.is-pouring.from-left  .mk-pourer--right,
.mk-fridge.is-pouring.from-right .mk-pourer--left { opacity: 0; }
/* Once it is open they are not the subject any more, and they must not sit
   over her art. */
.mk-fridge.is-open .mk-pourer,
.mk-fridge.is-open .mk-pourer-hint { opacity: 0; pointer-events: none; animation: none; }

@media (max-width: 620px) {
  /* Less overhang on a phone: there is no side margin to hang into. */
  .mk-pourer { width: clamp(84px, 30%, 128px); }
  .mk-pourer--left  { left: -6%; bottom: 1%; }
  .mk-pourer--right { right: -4%; top: 2%; }
  .mk-pourer-hint { display: none; }
}

.mk-pourbtn {
  position: relative; margin-top: 10px; display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px; border-radius: 999px; cursor: pointer;
  background: var(--mk-ink); border: 2px solid var(--mk-ink); color: var(--mk-cream);
  font: inherit; font-weight: 800; letter-spacing: .04em;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.mk-pourbtn:hover { transform: translateY(-2px); background: var(--mk-pink); color: var(--mk-ink); border-color: var(--mk-pink); }
.mk-pourbtn-carton { display: block; width: 30px; height: 38px; transition: transform .5s cubic-bezier(.6, -.3, .3, 1.5); }
.mk-pourbtn-carton svg { display: block; width: 100%; height: 100%; }
.mk-c-body { fill: var(--mk-sky); stroke: var(--mk-ink); stroke-width: 3; }
.mk-c-roof { fill: #A6C9E8; stroke: var(--mk-ink); stroke-width: 3; stroke-linejoin: round; }
.mk-c-label { fill: var(--mk-milk); stroke: var(--mk-ink); stroke-width: 3; }

/* The splash, which is what actually wipes the cover away. */
.mk-splash {
  position: absolute; z-index: 4; left: 50%; top: 58%;
  width: 150%; aspect-ratio: 1; translate: -50% -50%;
  opacity: 0; scale: 0; pointer-events: none;
}
.mk-splash svg { display: block; width: 100%; height: 100%; }
.mk-splash path { fill: var(--mk-milk); }

.mk-fridge-art { position: absolute; inset: 0; z-index: 2; background: var(--mk-ink); }
.mk-fridge-art img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  opacity: 0; transition: opacity .5s ease;
}

/* -- the pour, in three beats: tip, splash, gone -- */
.mk-fridge.is-pouring .mk-pourbtn-carton { transform: rotate(-108deg) translateY(-6px); }
.mk-fridge.is-pouring .mk-splash { animation: mk-splash .85s cubic-bezier(.2, .7, .3, 1) forwards; }
.mk-fridge.is-open .mk-fridge-cover { opacity: 0; visibility: hidden; }
.mk-fridge.is-open .mk-fridge-art img { opacity: 1; }

@keyframes mk-splash {
  0%   { opacity: 0; scale: 0; rotate: 0deg; }
  18%  { opacity: 1; }
  70%  { opacity: 1; scale: 1.05; rotate: 34deg; }
  100% { opacity: 0; scale: 1.5; rotate: 48deg; }
}

.mk-hide {
  position: absolute; z-index: 5; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 251, 243, .92); border: 2px solid var(--mk-ink); color: var(--mk-ink);
  font: inherit; font-size: .84rem; font-weight: 800;
}
.mk-hide:hover { background: var(--mk-pink); }

.mk-fridge-foot { margin-top: 42px; text-align: center; font-size: .82rem; color: var(--mk-ink3); }

/* ------------------------------------------------------------ community */
.mk-community { position: relative; text-align: center; padding-top: 10px; }
.mk-peek { display: block; width: min(100%, 900px); height: auto; margin: 0 auto -10px; }
.mk-community-blurb { max-width: 56ch; margin: 12px auto 0; color: var(--mk-ink2); line-height: 1.7; }
.mk-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 18px; }
.mk .mk-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 19px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--mk-milk); border: 2px solid var(--mk-ink); color: var(--mk-ink);
  transition: transform .16s ease, background .16s ease;
}
.mk-social svg { width: 17px; height: 17px; fill: currentColor; }
.mk .mk-social:hover { transform: translateY(-2px); background: var(--mk-pink2); }
.mk .mk-social--ghost { border-style: dashed; }
.mk-brands { margin-top: 6px; font-size: .92rem; color: var(--mk-ink2); }
.mk-brands b { color: var(--mk-ink); }
.mk-biz { margin-top: 8px; font-size: .88rem; color: var(--mk-ink3); }
.mk .mk-biz a { color: var(--mk-ink2); }

.mk-credits {
  margin-top: 34px; padding: 24px 26px; border-radius: 18px;
  background: var(--mk-milk); border: 1px solid var(--mk-line);
}
.mk-credits h3 { font-family: var(--head); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 14px; }
.mk-credit-group { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--mk-line); }
.mk-credit-role { min-width: 130px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-ink3); }
.mk-credit-names { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.mk-credit-names a, .mk-credit-names span { color: var(--mk-ink2); }
.mk .mk-credit-names a:hover { color: var(--mk-pink); }

/* ------------------------------------------------------------ narrower */
@media (max-width: 980px) {
  .mk-hero-in { grid-template-columns: 1fr; gap: 20px; }
  .mk-hero-art { max-width: 320px; order: -1; }
  .mk-about { grid-template-columns: 1fr; gap: 30px; }
  .mk-carton { max-width: 300px; margin-inline: auto; }
}
@media (max-width: 640px) {
}
@media (max-width: 620px) {
  .mk-hero { padding-top: 96px; }
  .mk-sec { padding: 48px 0; }
  .mk-actions .mk-btn { flex: 1 1 100%; justify-content: center; }
  .mk-label { max-width: none; }
}

/* ------------------------------------------------------------ join DRXP */
/* The shared card defaults to the site's pink and purple with white type.
   Hers takes her bows into her cowbell — warm, and it keeps the bottom of
   the page light rather than ending a cream page on a dark slab.
   The ink MUST flip: the card's default white type on her pink measures
   1.87:1, which is not a weak contrast but an unreadable one. On her ink
   it runs 7.93:1 at the pink end to 8.3:1 at the gold. */
.mk {
  --join-a: var(--mk-pink);
  --join-b: var(--mk-gold);
  --join-glow: rgba(242, 185, 59, .5);
  --join-ink: var(--mk-ink);
  --join-wash: rgba(43, 39, 36, .08);
  --join-tile: rgba(255, 255, 255, .42);
  --join-tile-line: rgba(43, 39, 36, .18);
}
/* Both buttons are white-on-gradient by default, which disappears here. */
.mk .cp-btn-white { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-cream) !important; }
.mk .cp-btn-white:hover { background: var(--mk-milk); border-color: var(--mk-ink); color: var(--mk-ink) !important; }
.mk .cp-btn-ghost { border-color: rgba(43, 39, 36, .5); color: var(--mk-ink) !important; }
.mk .cp-btn-ghost:hover { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-cream) !important; }

/* --------------------------------------------------------- calmer modes */
@media (prefers-reduced-motion: reduce) {
  .mk-bell, .mk-hero-art img, .mk-splat-bg, .mk-float, .mk-band-track { animation: none; }
  .mk-float { opacity: .18; }
  .mk-fridge.is-pouring .mk-splash { animation: none; }
  .mk-pourer, .mk-tack--love { animation: none; }
  .mk-carton:hover img, .mk-carton:focus-within img { animation: none; }
  .mk-paper { translate: none !important; }
  .mk-pourer, .mk-fridge.is-pouring .mk-pourer { transition: none; }
  .mk-hero.is-playing .mk-backdrop video { opacity: 1; transition: none; }
  .mk-pourbtn-carton, .mk-carton-stat, .mk-btn, .mk-social { transition: none; }
  /* The turn still happens on a press, it just does not swing. */
  .mk-moodbox-card, .mk-moodbox.is-returning .mk-moodbox-card { transition-duration: .01s; }
}
.perf-lite .mk-float, .perf-lite .mk-splat-bg,
.perf-lite .mk-pourer, .perf-lite .mk-tack--love { animation: 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-milkvt) { --scroll-acc: #F6A8BC; }