/* ============ MONTH — a new month, and it's still us ============
   Section (#month): the house double-frame card with the month's name, a
   ghost numeral, "Month N of us", a Monday-first mini calendar (lived days
   fill with hearts, today pulses, the 24th carries ∞, 10 Dec a candle,
   24 Dec · 22 Jan · 24 May a ring) and three lines of the month, the third
   one — سوسو's — on maroon. Moment (.mo-room): a dark room where last
   month's calendar leaf tears off and falls away. Transform/opacity only;
   loops gated by .is-live / .is-paused; reduced motion = fades. */

.month {
  --mo-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  padding: 5rem 1.2rem 7rem;
  text-align: center;
}
.month .section-head { margin-bottom: 2.6rem; }
.month .statement-sub { text-wrap: balance; }
.month .statement-sub .ar { font-weight: 700; color: var(--ink); }
.mo-inner { max-width: 560px; margin: 0 auto; }

/* ---- the shell (house double frame) ---- */
.mo-shell {
  background: rgba(217, 108, 138, 0.05);
  border: 1px solid rgba(217, 108, 138, 0.1);
  border-radius: var(--radius-xl);
  padding: 0.45rem;
  text-align: left;
}
.mo-card {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 0.45rem);
  padding: 1.5rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, #FFFDFB, #FDF6F2);
  box-shadow: var(--shadow-ambient), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.mo-card > :not(.mo-ghost) { position: relative; }
.mo-ghost {
  position: absolute;
  right: -0.03em;
  top: -0.08em;
  font-size: clamp(8rem, 40vw, 11rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(217, 108, 138, 0.2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- top row ---- */
.mo-name {
  font-size: clamp(3rem, 14vw, 3.9rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  padding-right: 0.04em;
  background: linear-gradient(135deg, var(--ink) 30%, var(--rose) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-top: 0.9rem;
}
.mo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.7rem 0.24rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rose);
  background: var(--rose-mist);
  border: 1px solid rgba(217, 108, 138, 0.16);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mo-pill svg { width: 0.72rem; height: 0.72rem; fill: currentColor; stroke: none; }
.mo-day {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.mo-sep { padding: 0 0.42em; color: var(--rose-soft); }

/* ---- body ---- */
.mo-body {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.4rem;
}

/* ---- calendar ---- */
.mo-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(217, 108, 138, 0.14);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  opacity: 0.75;
}
.mo-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 0.5rem;
}
.mo-d {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mo-d > * { grid-area: 1 / 1; position: relative; }
.mo-n { color: var(--ink); font-weight: 500; }
.mo-d.is-future .mo-n { font-weight: 400; color: var(--ink-soft); opacity: 0.42; }
.mo-d.is-past .mo-n { opacity: 0; }
/* a lived day: a small heart that lands when the calendar scrolls in */
.mo-h {
  width: 0.78rem;
  height: 0.78rem;
  fill: var(--rose);
  stroke: none;
  opacity: 0;
  transform: scale(0.2);
  transition:
    transform 0.7s var(--ease-spring) calc(var(--i, 0) * 30ms),
    opacity 0.3s ease calc(var(--i, 0) * 30ms);
}
.mo-cal.is-in .mo-d.is-past .mo-h { opacity: 1; transform: none; }
/* today */
.mo-d.is-today::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rose), var(--rose-soft));
  box-shadow: 0 8px 18px -8px rgba(217, 108, 138, 0.9);
}
.mo-d.is-today::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--rose);
  opacity: 0;
  pointer-events: none;
}
.month.is-live .mo-d.is-today::after { animation: mo-pulse 2.6s var(--mo-ease) infinite; }
@keyframes mo-pulse {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.8); opacity: 0; }
}
.mo-d.is-today .mo-n { color: #fff; font-weight: 700; }
/* special days */
.mo-mk, .mo-cake {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--rose);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mo-cake { width: 1.05rem; height: 1.05rem; stroke-width: 1.7; }
.mo-mk--heart { width: 0.85rem; height: 0.85rem; fill: var(--rose); stroke: none; }
.mo-d.is-inf .mo-n, .mo-d.is-cake .mo-n, .mo-d.is-ring .mo-n { opacity: 0; }
.mo-d.is-inf .mo-h, .mo-d.is-cake .mo-h, .mo-d.is-ring .mo-h { display: none; }
.mo-d.is-future .mo-mk, .mo-d.is-future .mo-cake { opacity: 0.55; }
.mo-d.is-today .mo-mk, .mo-d.is-today .mo-cake { stroke: #fff; opacity: 1; }
.mo-d.is-today .mo-mk--heart { fill: #fff; stroke: none; }
.mo-d.is-ring:not(.is-today)::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--rose);
  opacity: 0.85;
}
.mo-d.is-ring.is-future::before { opacity: 0.45; }
.mo-d.is-ring.is-today::before { box-shadow: 0 0 0 2px #FFFDFB, 0 0 0 3.5px var(--rose), 0 8px 18px -8px rgba(217, 108, 138, 0.9); }
/* legend */
.mo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.85rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.mo-legend:empty { display: none; }
.mo-lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.mo-lg b { font-weight: 700; color: var(--ink); }
.mo-lg .ar { font-weight: 700; color: var(--ink); }
.mo-lg .mo-sep { padding: 0 0.32em; }
.mo-lg .mo-mk, .mo-lg .mo-cake { width: 0.9rem; height: 0.9rem; }
.mo-lg .mo-mk--heart { width: 0.75rem; height: 0.75rem; }

/* ---- lines of the month ---- */
.mo-lines {
  display: grid;
  gap: 1.15rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(217, 108, 138, 0.14);
}
.mo-k {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
}
.mo-k svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mo-line--soso .mo-k svg { fill: currentColor; stroke: none; }
.mo-k .ar { font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.mo-q {
  margin-top: 0.45rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.mo-line--poet .mo-q {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.85;
}
.mo-by {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mo-by.ar { font-size: 0.82rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* سوسو's line sits on maroon */
.mo-line--soso {
  padding: 1rem 1.15rem 1.05rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, var(--maroon), var(--maroon-deep));
  color: var(--maroon-paper);
  box-shadow: 0 22px 50px -24px rgba(82, 26, 40, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mo-line--soso .mo-k { color: var(--rose-soft); }
.mo-line--soso .mo-k .ar { color: #fff; }
.mo-line--soso .mo-q {
  font-size: clamp(1.08rem, 4.3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.75;
  color: #fff;
}
.mo-line--soso .mo-by { color: rgba(255, 249, 244, 0.62); }

/* ---- masked words (section lines + the room) ---- */
.mo-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.16em 0.05em 0.2em;
  margin: -0.16em -0.05em -0.2em;
}
.ar .mo-w, .ar.mo-w { padding: 0.28em 0.06em 0.3em; margin: -0.28em -0.06em -0.3em; }
.mo-wi {
  display: inline-block;
  transform: translate3d(0, 125%, 0);
  transition: transform 1s var(--mo-ease, cubic-bezier(0.23, 1, 0.32, 1)) calc(var(--d, 0s) + var(--i, 0) * 60ms);
}
.mo-in .mo-wi { transform: none; }
.mo-lines .mo-by { opacity: 0; transition: opacity 0.8s ease 0.7s; }
.mo-lines.mo-in .mo-by { opacity: 1; }

/* ---- desktop: calendar left, lines right ---- */
@media (min-width: 768px) {
  .month { padding: 8rem 1.2rem 10rem; }
  .month .section-head { margin-bottom: 3.4rem; }
  .mo-inner { max-width: 880px; }
  .mo-card { padding: 2rem 2rem 1.9rem; }
  .mo-ghost { font-size: 11rem; top: -0.16em; right: 28%; }
  .mo-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
  .mo-name { font-size: 4.6rem; }
  .mo-meta { flex-direction: column; align-items: flex-end; gap: 0.5rem; margin: 0 0 0.3rem; text-align: right; }
  .mo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; margin-top: 1.9rem; }
  .mo-d { font-size: 0.86rem; }
  .mo-grid { gap: 3px; }
  .mo-lines { padding: 0 0 0 2.4rem; border-top: 0; border-left: 1px solid rgba(217, 108, 138, 0.14); align-content: start; gap: 1.3rem; }
}

/* ============ THE MOMENT · a leaf tears off the calendar ============ */
html.mo-lock, html.mo-lock body { overflow: hidden; }

.mo-room {
  --mo-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --w: min(58vw, 224px);
  position: fixed;
  inset: 0;
  z-index: 140; /* under the birthday room (150) */
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(120% 75% at 50% -8%, #7A2A3E 0%, #421424 48%, #1C0A10 100%);
  color: var(--maroon-paper);
  font-family: 'Thmanyah Sans', system-ui, sans-serif;
  text-align: center;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 0.7s ease;
  outline: none;
}
.mo-room.is-on { opacity: 1; }
.mo-room.is-closing { opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.mo-vig {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, transparent 40%, rgba(10, 3, 6, 0.6) 100%);
  pointer-events: none;
}
.mo-room .grain { position: fixed; z-index: 1; opacity: 0.05; }

/* drifting petals & hearts (≤ 9 elements, two nested transforms) */
.mo-drift {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mo-room.is-torn .mo-drift { opacity: 1; }
.mo-p {
  position: absolute;
  top: -6vh;
  left: var(--x, 50%);
  width: 12px;
  height: 16px;
  animation: mo-drop var(--dur, 12s) linear var(--dl, 0s) infinite;
  will-change: transform;
}
.mo-p > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #F2C4B3, #E8A0B0);
  opacity: 0.55;
  animation: mo-sway var(--sw, 3s) ease-in-out infinite alternate;
}
.mo-p--heart > i { background: none; border-radius: 0; opacity: 0.7; }
.mo-p--heart svg { display: block; width: 100%; height: 100%; fill: var(--rose-soft); stroke: none; }
@keyframes mo-drop { to { transform: translate3d(0, 118vh, 0); } }
@keyframes mo-sway {
  from { transform: translateX(-14px) rotate(-28deg) scale(var(--sc, 1)); }
  to   { transform: translateX(14px) rotate(28deg) scale(var(--sc, 1)); }
}
.mo-room.is-paused .mo-p, .mo-room.is-paused .mo-p > i { animation-play-state: paused; }

/* stage */
.mo-stage {
  position: relative;
  z-index: 2;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.6vh, 1.7rem);
  width: 100%;
  max-width: 34rem;
  padding: calc(env(safe-area-inset-top, 0px) + 2.4rem) 1.35rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* ---- the calendar pad ---- */
.mo-pad {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.04);
  margin-top: 0.7rem;
  perspective: 900px;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 1s ease 0.1s, transform 1.2s var(--mo-ease) 0.1s;
}
.mo-room.is-on .mo-pad { opacity: 1; transform: none; }
/* the stubs of the months already torn */
.mo-stubs { position: absolute; left: 0; right: 0; top: 0; height: 30px; }
.mo-stubs i { position: absolute; inset: 0; border-radius: 9px 9px 0 0; }
.mo-stubs i:nth-child(1) { transform: translateY(-2px) scaleX(0.985); background: #F1E5DE; }
.mo-stubs i:nth-child(2) { transform: translateY(-4px) scaleX(0.97); background: #E6D7CF; }
.mo-stubs i:nth-child(3) { transform: translateY(-6px) scaleX(0.955); background: #D9C8BF; }
.mo-leaf { position: absolute; inset: 0; }
.mo-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #FFFDFB, #FBF4EF);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mo-hole {
  position: absolute;
  top: 9px;
  left: 27%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #2A1118;
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mo-hole + .mo-hole { left: 73%; }
.mo-fall {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 0;
  transform-origin: 0 0;
}
.mo-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  border-top: 1.5px dashed rgba(61, 44, 51, 0.22);
  background: linear-gradient(180deg, #FCF5F0 0%, #F7ECE5 100%);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--ink);
  text-align: left;
  padding: 0.95rem 1rem 1rem 1.05rem;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.mo-leaf-ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.14em;
  font-size: calc(var(--w) * 0.6);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(217, 108, 138, 0.3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.mo-leaf-year {
  position: relative;
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}
.mo-leaf-name {
  position: relative;
  display: block;
  margin-top: 0.5rem;
  font-size: calc(var(--w) * 0.145);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mo-leaf-of {
  position: relative;
  display: inline-block;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(217, 108, 138, 0.32);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* last month's leaf: lighter shadow, muted ink; it tears from the top-right and hinges on the top-left */
.mo-leaf--old .mo-sheet { box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.mo-leaf--old .mo-leaf-name { color: var(--ink-soft); }
.mo-leaf--old .mo-leaf-ghost { -webkit-text-stroke-color: rgba(122, 97, 105, 0.22); }
.mo-leaf--old .mo-fall { will-change: transform, opacity; }
.mo-room.is-tear .mo-leaf--old .mo-fall { animation: mo-fall 1.15s cubic-bezier(0.3, 0.55, 0.35, 1) forwards; }
.mo-room.is-tear .mo-leaf--old .mo-sheet { animation: mo-swing 1.15s var(--mo-ease) forwards; }
@keyframes mo-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 1; }
  40%  { transform: translate3d(2px, 4px, 0); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(40px, 72vh, 0); opacity: 0; }
}
/* the right corner peels up first (rotateY toward the viewer), the sheet swings on its top-left
   while it is still held, then lets go and flutters (rotateX) on the way down — perspective lives
   in the transform so it reaches the sheet */
@keyframes mo-swing {
  0%   { transform: perspective(800px) rotate(0deg) rotateX(0deg) rotateY(0deg); }
  18%  { transform: perspective(800px) rotate(1.5deg) rotateX(-5deg) rotateY(-16deg); }
  40%  { transform: perspective(800px) rotate(11deg) rotateX(8deg) rotateY(-9deg); }
  70%  { transform: perspective(800px) rotate(24deg) rotateX(-18deg) rotateY(5deg); }
  100% { transform: perspective(800px) rotate(38deg) rotateX(14deg) rotateY(-8deg); }
}
/* the shadow the old leaf cast on the new one lifts with it */
.mo-leaf--new .mo-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(40, 12, 20, 0.26), rgba(40, 12, 20, 0.06) 45%, transparent 70%);
  opacity: 1;
  transition: opacity 1s ease 0.25s;
  pointer-events: none;
}
.mo-room.is-tear .mo-leaf--new .mo-sheet::after { opacity: 0; }
/* the pad reacts: a settle on the new sheet, a small sway on the rings */
.mo-room.is-torn .mo-leaf--new .mo-sheet { animation: mo-settle 0.9s var(--mo-ease); }
@keyframes mo-settle {
  0%   { transform: scale(0.985) translateY(2px); }
  100% { transform: none; }
}
.mo-room.is-torn .mo-pad { animation: mo-pad-sway 2.6s ease-in-out; transform-origin: 50% 0; }
@keyframes mo-pad-sway {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(0.9deg); }
  52%  { transform: rotate(-0.55deg); }
  78%  { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}
/* the rings, on top of everything */
.mo-rings { position: absolute; left: 0; right: 0; top: -9px; height: 32px; pointer-events: none; }
.mo-rings i {
  position: absolute;
  top: 0;
  left: 27%;
  width: 12px;
  height: 26px;
  margin-left: -6px;
  border-radius: 7px;
  border: 2.6px solid #4A2A33;
  box-shadow: inset 1.2px 0 0 rgba(255, 255, 255, 0.28), 1px 1px 3px rgba(0, 0, 0, 0.45);
}
.mo-rings i + i { left: 73%; }

/* ---- copy ---- */
.mo-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}
.mo-title {
  font-size: clamp(1.45rem, 6vw, 2rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  filter: drop-shadow(0 8px 22px rgba(8, 4, 10, 0.45));
}
.mo-rlines {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 30rem;
  margin-top: 0.35rem;
}
.mo-rq {
  font-size: clamp(0.92rem, 3.6vw, 1.02rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 249, 244, 0.82);
  text-wrap: pretty;
}
.mo-rby {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 249, 244, 0.5);
  opacity: 0;
  transition: opacity 0.8s ease var(--d, 0s);
}
.mo-in .mo-rby { opacity: 1; }
.mo-rby.ar { font-size: 0.78rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mo-rp {
  margin-top: 0.8rem;
  font-size: clamp(1.02rem, 4.2vw, 1.18rem);
  font-weight: 500;
  line-height: 1.8;
  color: #F9C9D7;
  text-wrap: balance;
}
.mo-rs {
  margin-top: 0.8rem;
  font-size: clamp(1.1rem, 4.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  text-wrap: balance;
}
.mo-rby--soso { color: rgba(255, 249, 244, 0.62); }
.mo-room .mo-w { padding: 0.18em 0.06em 0.22em; margin: -0.18em -0.06em -0.22em; }
.mo-room .ar .mo-w { padding: 0.3em 0.06em 0.32em; margin: -0.3em -0.06em -0.32em; }

/* the door out */
.mo-enter {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
  padding: 0.5rem 0.6rem 0.5rem 1.7rem;
  border: none;
  border-radius: 999px;
  background: var(--maroon-paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
}
.mo-in .mo-enter {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease var(--d, 0s), transform 0.9s var(--ease-spring) var(--d, 0s);
}
.mo-enter:active { transform: scale(0.97) !important; transition-duration: 0.16s; }
.mo-enter-ico {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  background: var(--rose);
  display: grid;
  place-items: center;
}
.mo-enter-ico svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .mo-in .mo-enter:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -16px rgba(0, 0, 0, 0.65); }
  .mo-enter { transition: transform 0.5s var(--mo-ease), box-shadow 0.5s ease; }
}

/* shorter phones: the leaf shrinks so the button stays above the fold */
@media (max-height: 700px) {
  .mo-room { --w: min(46vw, 168px); }
  .mo-stage { gap: 0.75rem; padding-top: calc(env(safe-area-inset-top, 0px) + 1.6rem); }
  .mo-pad { margin-top: 0.4rem; }
  .mo-title { font-size: clamp(1.3rem, 5.4vw, 1.7rem); }
  .mo-rq { font-size: 0.88rem; }
  .mo-rp { margin-top: 0.5rem; font-size: 1rem; line-height: 1.65; }
  .mo-rs { margin-top: 0.5rem; font-size: 1.06rem; }
  .mo-enter { margin-top: 0.4rem; font-size: 0.95rem; }
  .mo-copy { gap: 0.4rem; }
}
@media (min-width: 768px) {
  .mo-room { --w: 270px; }
  .mo-stage { max-width: 40rem; gap: 1.8rem; }
  .mo-copy { gap: 0.7rem; }
}

/* ---- reduced motion: no tear, no drift, fades only ---- */
@media (prefers-reduced-motion: reduce) {
  .mo-leaf--old, .mo-p { display: none; }
  .mo-wi { transform: none; transition: none; }
  .mo-lines .mo-by { transition-delay: 0.1s; }
  .mo-h { transition: none; }
  .mo-cal .mo-d.is-past .mo-h { opacity: 1; transform: none; }
  .month.is-live .mo-d.is-today::after { animation: none; }
  .mo-pad { transition: opacity 0.4s ease; transform: none; }
  .mo-room, .mo-room.is-closing { transition: opacity 0.4s ease; }
  .mo-room.is-torn .mo-leaf--new .mo-sheet { animation: none; }
  .mo-room.is-torn .mo-pad { animation: none; }
  .mo-leaf--new .mo-sheet::after { display: none; }
  .mo-rby, .mo-in .mo-enter { transition: opacity 0.4s ease 0.15s; transform: none; }
  .mo-enter { transform: none; }
}