/* I'm In, the pop-up after it, and /the-wall/.
   Madame Monet's own hot pinks and reds only. The one press with a gloss is the
   site's own lacquer .bp-btn (calm.css); every other press is plain. */

/* ---------- the I'm In form ---------- */
main.mm-rally .mm-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
main.mm-rally .mm-in__wall { margin: 0 0 6px; }
main.mm-rally .mm-in__wallgo { font-family: var(--mm-label); font-weight: 700; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--h-pink-a) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; text-decoration-color: var(--h-red-a); }
main.mm-rally .mm-in__wallgo:hover, main.mm-rally .mm-in__wallgo:focus-visible { color: var(--h-red-a) !important; }
main.mm-rally .mm-in__word:empty { display: none; }
main.mm-rally .mm-in__f { width: min(100%, 30rem); }
main.mm-rally .mm-in__f input.mm-in__email { width: min(100%, 22rem); font-family: var(--mm-read); font-size: 22px; color: var(--h-red-a); background: #FFFFFF; border: 0; border-bottom: 2px solid var(--h-red-a); border-radius: 0; padding: 8px 2px; outline: none; text-align: center; }
main.mm-rally .mm-in__f input[type="text"]:focus, main.mm-rally .mm-in__f input.mm-in__email:focus { border-bottom-color: var(--h-pink-a); }
main.mm-rally .mm-in__under { font-family: var(--mm-read); font-size: 15px; line-height: 1.45; color: var(--h-red-a) !important; margin: -4px 0 0; max-width: 24rem; }
main.mm-rally .mm-in__yes { display: flex; gap: 12px; align-items: center; justify-content: center; font-family: var(--mm-read); font-size: 17px; color: var(--h-red-a) !important; cursor: pointer; }
main.mm-rally .mm-in__yes input { accent-color: var(--h-pink-a); width: 22px; height: 22px; margin: 0; flex: none; }
main.mm-rally .mm-in__which { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
main.mm-rally .mm-in__which[hidden] { display: none; }
main.mm-rally .mm-in__stb, main.mm-rally .mm-in__st span { display: inline-block; font-family: var(--mm-label); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--h-red-a) !important; background: #FFFFFF; border: 2px solid var(--h-pink-a); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
main.mm-rally .mm-in__stb:hover, main.mm-rally .mm-in__stb:focus-visible, main.mm-rally .mm-in__st input:checked + span { background: var(--h-pink-a); color: #FFFFFF !important; }
main.mm-rally .mm-in__st input { position: absolute; opacity: 0; width: 1px; height: 1px; }
main.mm-rally .mm-in__pot { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
main.mm-rally .mm-in__f[hidden], main.mm-rally [data-in-after][hidden], main.mm-rally .mv-r-do__one[hidden] { display: none !important; }
main.mm-rally .mm-in__f.is-busy [data-in-go] { opacity: .5; pointer-events: none; }

/* ---------- the pop-up ---------- */
.mm-wsay { width: min(92vw, 540px); max-width: 92vw; max-height: 92vh; border: 0; border-top: 8px solid var(--h-pink-a, #FF0099); border-radius: 22px; overflow: auto; padding: 0; background: #FFFFFF; color: var(--h-red-a, #FF0F2F); box-shadow: 0 30px 80px -20px rgba(150, 0, 80, .55); }
.mm-wsay::backdrop { background: rgba(255, 0, 153, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mm-wsay__f, .mm-wsay__done { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 5vw, 40px); text-align: left; }
.mm-wsay__done[hidden], .mm-wsay__f[hidden] { display: none; }
.mm-wsay .mm-wsay__h { font-family: var(--mm-display); font-weight: 400; font-size: clamp(28px, 6vw, 40px); line-height: 1.02; color: var(--h-pink-a, #FF0099) !important; margin: 0 0 4px; text-transform: none; letter-spacing: 0; }
.mm-wsay .mm-wsay__words { width: 100%; box-sizing: border-box; min-height: 6.5em; resize: vertical; font-family: var(--mm-read); font-size: 21px; line-height: 1.4; color: var(--h-red-a, #FF0F2F); background: #FFF5FA; border: 2px solid #FFD6E8; border-radius: 14px; padding: 14px 16px; outline: none; }
.mm-wsay .mm-wsay__words:focus, .mm-wsay .mm-wsay__name:focus { border-color: var(--h-pink-a, #FF0099); }
.mm-wsay .mm-wsay__words::placeholder, .mm-wsay .mm-wsay__name::placeholder { color: #FF7FBF; opacity: 1; }
.mm-wsay .mm-wsay__lab { font-family: var(--mm-label); font-weight: 700; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--h-pink-a, #FF0099) !important; margin: 6px 0 -4px; }
.mm-wsay .mm-wsay__name { width: 100%; box-sizing: border-box; font-family: var(--mm-read); font-size: 18px; color: var(--h-red-a, #FF0F2F); background: #FFFFFF; border: 0; border-bottom: 2px solid var(--h-red-a, #FF0F2F); border-radius: 0; padding: 8px 2px; outline: none; }
.mm-wsay .mm-wsay__check { display: flex; gap: 10px; align-items: center; font-family: var(--mm-read); font-size: 17px; color: var(--h-red-a, #FF0F2F) !important; cursor: pointer; }
.mm-wsay .mm-wsay__check input { accent-color: var(--h-pink-a, #FF0099); width: 20px; height: 20px; margin: 0; }
.mm-wsay .mm-wsay__word { font-family: var(--mm-read); font-size: 17px; color: var(--h-red-a, #FF0F2F) !important; margin: 0; min-height: 1.4em; }
.mm-wsay .mm-wsay__go { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 8px 0 0; }
.mm-wsay .mm-wsay__not { background: none; border: 0; padding: 6px 2px; cursor: pointer; font-family: var(--mm-read); font-size: 17px; color: var(--h-red-a, #FF0F2F); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--h-pink-a, #FF0099); }
main.rb .mm-wsay p, main.rb .mm-wsay h2, main.rb .mm-wsay label { max-width: none; width: auto; }
.mm-wsay .mm-in__pot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- /the-wall/ ---------- */
main.mm-thewall-page { background: var(--h-pink-a); }
.mm-thewall { position: relative; overflow: hidden; color: #FFFFFF; background: linear-gradient(172deg, var(--h-pink-b) 0%, var(--h-pink-a) 38%, var(--h-red-a) 100%); padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.mm-thewall__top { text-align: center; padding: 0 16px; position: relative; z-index: 2; }
.mm-thewall .mm-thewall__eye { font-family: var(--mm-label); font-weight: 700; font-size: clamp(11px, .9vw, 13px); letter-spacing: .36em; text-transform: uppercase; color: #FFFFFF !important; opacity: .9; margin: 0 0 16px; }
.mm-thewall .mm-thewall__h { font-family: var(--mm-display); font-weight: 400; font-size: clamp(38px, 7vw, 92px); line-height: .98; color: #FFFFFF !important; margin: 0; text-shadow: 0 .04em 0 rgba(170, 0, 40, .35); }
.mm-thewall .mm-thewall__waiting { font-family: var(--mm-read); font-size: clamp(20px, 2vw, 28px); line-height: 1.4; color: #FFFFFF !important; text-align: center; max-width: 30rem; margin: clamp(40px, 6vw, 80px) auto clamp(32px, 4vw, 56px); padding: 0 16px; }
.mm-thewall .mm-thewall__go { text-align: center; margin: clamp(24px, 3vw, 40px) 0 0; position: relative; z-index: 2; }

.mm-thewall__field { position: relative; height: 72vh; height: 72svh; min-height: 28rem; margin-top: clamp(16px, 3vw, 32px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); --mm-from: 64vh; --mm-to: -32vh; }
.mm-said { position: absolute; top: 0; margin: 0; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; color: #FFFFFF; text-shadow: 0 2px 12px rgba(140, 0, 50, .32); --hand: 1; font-size: calc(1.34rem * var(--hand)); width: min(17ch, 44vw); }
.mm-said__words { margin: 0; padding: 0; border: 0; font: inherit; color: inherit !important; line-height: 1.3; text-wrap: balance; letter-spacing: 0; quotes: none; }
.mm-said__who { margin: .55em 0 0; font-family: var(--mm-label); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #FFFFFF !important; opacity: .92; text-shadow: 0 1px 6px rgba(140, 0, 50, .35); }
.mm-said:nth-child(odd) { rotate: -1.2deg; }
.mm-said:nth-child(3n) { rotate: 1.4deg; }

/* The five hands, each at its own size and leading (The Don't Hold Back Project's rules). */
.mm-said--handlee  { font-family: 'Handlee', cursive; --hand: 1; }
.mm-said--grace    { font-family: 'Covered By Your Grace', cursive; --hand: 1.06; }
.mm-said--allura   { font-family: 'Allura', cursive; --hand: 1.42; }
.mm-said--licorice { font-family: 'Licorice', cursive; --hand: 1.62; }
.mm-said--ooh      { font-family: 'Oooh Baby', cursive; --hand: 1.24; }
.mm-said--allura .mm-said__words   { line-height: 1.08; }
.mm-said--licorice .mm-said__words { line-height: 1.02; }
.mm-said--ooh .mm-said__words      { line-height: 1.18; }
/* The fine hands need more on a hot ground, or they vanish. */
.mm-said--allura .mm-said__words, .mm-said--licorice .mm-said__words { -webkit-text-stroke: .015em #FFFFFF; }

/* Phone: two lanes, fewer and larger. */
.mm-said.is-c0 { left: 4%; }
.mm-said.is-c1 { left: 52%; }

@media (min-width: 46.01rem) {
  .mm-thewall__field { height: 70vh; height: 70svh; min-height: 30rem; }
  .mm-said { font-size: calc(1.54rem * var(--hand)); width: min(20ch, 29vw); }
  .mm-said.is-c0, .mm-said.is-c1 { left: auto; }
  .mm-said.is-b0 { left: 3%; }
  .mm-said.is-b1 { left: 36%; }
  .mm-said.is-b2 { left: 68%; }
}
@media (min-width: 62rem) {
  .mm-thewall__field { height: 82vh; height: 82svh; min-height: 36rem; --mm-from: 72vh; --mm-to: -34vh; }
  .mm-said { font-size: calc(1.72rem * var(--hand)); width: min(22ch, 21vw); }
  .mm-said.is-b0, .mm-said.is-b1, .mm-said.is-b2 { left: auto; }
  .mm-said.is-a0 { left: 3%; }
  .mm-said.is-a1 { left: 27%; }
  .mm-said.is-a2 { left: 51%; }
  .mm-said.is-a3 { left: 75%; }
}
@media (max-width: 24rem) {
  .mm-said { font-size: calc(1.24rem * var(--hand)); width: min(15ch, 46vw); }
}

/* Still, readable grid when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .mm-thewall__field { height: auto; min-height: 0; -webkit-mask-image: none; mask-image: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 28px 32px; padding: 8px 16px 0; max-width: 72rem; margin-left: auto; margin-right: auto; }
  .mm-said, .mm-said.is-a0, .mm-said.is-a1, .mm-said.is-a2, .mm-said.is-a3, .mm-said.is-b0, .mm-said.is-b1, .mm-said.is-b2, .mm-said.is-c0, .mm-said.is-c1 { position: static; left: auto; opacity: 1; animation: none !important; transform: none; rotate: none; width: auto; }
}

/* ---------- /stop/ ---------- */
main.mm-stop { background: #FFFFFF; }
.mm-stop__in { text-align: center; padding: clamp(72px, 10vw, 140px) 16px; }
.mm-stop .mm-stop__h { font-family: var(--mm-display); font-weight: 400; font-size: clamp(32px, 5vw, 64px); line-height: 1.02; color: var(--h-pink-a) !important; margin: 0 0 18px; }
.mm-stop .mm-stop__p { font-family: var(--mm-read); font-size: clamp(18px, 1.6vw, 22px); color: var(--h-red-a) !important; margin: 0 0 14px; }
.mm-stop .mv-r-word { font-family: var(--mm-display); font-size: 22px; color: var(--h-red-a) !important; text-decoration: underline; text-decoration-color: var(--h-pink-a); text-underline-offset: .16em; }