/* =====================================================================
   MEMORY PAGES: an event that already happened, told as a story.
   First used for Hercules (body.olympus). Blocks: memory_hero, memory_chapter, memory_film,
   memory_show, memory_wall, memory_keepsake, memory_end  (blocks_extra.py)
   The living background (.ev-back) and the particles come from event.css / event.js.
   ===================================================================== */
body.memory-page { --mm-ink: #0d0b2a; --mm-gold: var(--accent, #ffd700); --mm-warm: var(--accent-2, #ff9d4d);
  --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 21h45V3H9v12h24V9H21' fill='none' stroke='%23ffd700' stroke-width='3'/%3E%3C/svg%3E"); }
body.memory-page main { overflow: clip; }
body.memory-page main > section { position: relative; }
body.memory-page main > .section::before, body.memory-page main > .section-tight::before { display: none; }
.mm-keyline { display: block; height: 24px; background: var(--mm-key) center / 48px 24px repeat-x; opacity: 0.75; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }

/* ---------- hero: the night, not the flyer ---------- */
.mm-hero { position: relative; isolation: isolate; min-height: min(100svh, 920px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: calc(var(--header-h, 80px) + 40px) 0 0; }
.mm-hero-photo { position: absolute; inset: 0 -3% 26%; z-index: -3; background: var(--img) var(--pos, center 40%) / cover no-repeat; animation: mm-push 26s ease-out both; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 99%); mask-image: linear-gradient(180deg, #000 62%, transparent 99%); }
@keyframes mm-push { from { transform: scale(1.14); } to { transform: scale(1); } }
.mm-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--tint-2) 92%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--tint-2) 72%, transparent), transparent 22%, transparent 42%, color-mix(in srgb, var(--tint-2) 78%, transparent) 66%, color-mix(in srgb, var(--tint-2) 97%, transparent) 90%); }
.mm-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background: radial-gradient(40% 50% at 78% 18%, color-mix(in srgb, var(--mm-gold) 60%, transparent), transparent 70%), radial-gradient(36% 44% at 16% 30%, color-mix(in srgb, var(--mm-warm) 50%, transparent), transparent 70%); animation: mm-glow 9s ease-in-out infinite alternate; }
@keyframes mm-glow { to { opacity: 0.85; transform: translateY(-2%); } }
.mm-hero-in { text-align: center; padding-bottom: clamp(18px, 3vw, 34px); }
.mm-kicker { margin: 0 0 4px; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--mm-gold); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); animation: mm-up 0.9s var(--ease-out) 0.2s both; }
.mm-hero .ev-logo { display: block; margin: 0 auto; width: min(70vw, 480px); height: auto; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.85)); animation: mm-logo 1.3s var(--ease-spring) 0.35s both; }
.mm-hero .ev-logo.ev-logo-v { display: none; }
@keyframes mm-logo { from { opacity: 0; transform: translateY(30px) scale(0.86); } }
@keyframes mm-up { from { opacity: 0; transform: translateY(18px); } }
.mm-hero-line { margin: 10px 0 8px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.1; color: #fff; text-shadow: 0 4px 26px rgba(0, 0, 0, 0.9); animation: mm-up 0.9s var(--ease-out) 0.7s both; }
.mm-hero-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.2rem); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); animation: mm-up 0.9s var(--ease-out) 0.9s both; }
.mm-hero-meta span + span::before { content: '✦'; color: var(--mm-gold); margin-inline: 12px; }
.mm-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; min-height: 44px; color: #fff; text-decoration: none; font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); animation: mm-up 0.9s var(--ease-out) 1.2s both; }
.mm-scroll svg { width: 26px; height: 26px; color: var(--mm-gold); transform: rotate(-90deg); animation: mm-nudge 1.8s ease-in-out infinite; }
@keyframes mm-nudge { 50% { translate: 0 7px; } }

/* ---------- chapters ---------- */
.mm-chapter { padding: clamp(34px, 4.6vw, 64px) 0; isolation: isolate; }
.mm-chapter::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70% 70% at var(--gx, 70%) 50%, color-mix(in srgb, var(--tint-2) 82%, transparent), color-mix(in srgb, var(--tint-2) 46%, transparent) 60%, transparent 85%); }
.mm-water { position: absolute; z-index: -1; top: clamp(4px, 2vw, 30px); inset-inline-start: -1vw; max-width: 100vw; overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-hand); font-weight: 800; font-size: clamp(4rem, 15vw, 13rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--mm-gold) 38%, transparent); opacity: 0.55; }
.mm-ch-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); gap: 30px clamp(30px, 5vw, 70px); align-items: center; }
.mm-chapter.flip .mm-ch-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
.mm-chapter.flip .mm-ch-text { order: 2; }
.mm-chapter.flip { --gx: 30%; }
.mm-chapter.flip .mm-water { inset-inline-start: auto; inset-inline-end: -1vw; }
.mm-num { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; color: var(--mm-gold); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.mm-num::after { content: ''; width: 72px; height: 12px; background: var(--mm-key) 0 50% / 24px 12px repeat-x; }
.mm-ch-text h2 { margin: 8px 0 14px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.08; color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.85); text-wrap: balance; }
.mm-prose p { margin: 0 0 0.8em; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.75; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); max-width: 34em; }
.mm-prose p:first-child { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.6; font-weight: 700; }
.mm-ch-photos { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mm-ph { position: relative; display: block; grid-column: span var(--span, 2); padding: 0; border: 0; overflow: hidden; border-radius: 18px; cursor: zoom-in; background: var(--mm-ink); aspect-ratio: 4 / 3;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.95); clip-path: inset(0 0 100% 0 round 18px); transition: clip-path 1.1s var(--ease-out) calc(var(--i) * 0.12s), transform 0.5s var(--ease-spring); }
.mm-ph.lead { grid-column: 1 / -1; aspect-ratio: 16 / 9.6; border-radius: 24px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-gold) 60%, transparent), 0 44px 70px -40px rgba(0, 0, 0, 0.95), 0 0 80px -30px color-mix(in srgb, var(--mm-gold) 70%, transparent); }
.mm-chapter.in .mm-ph { clip-path: inset(0 0 0 0 round 18px); }
.mm-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out) calc(var(--i) * 0.12s), filter 0.4s; }
.mm-chapter.in .mm-ph img { transform: scale(1.02); }
.mm-ph:hover, .mm-ph:focus-visible { transform: translateY(-5px); }
.mm-ph:hover img { transform: scale(1.08); filter: brightness(1.08); transition-delay: 0s; transition-duration: 0.8s; }
.mm-art { position: absolute; z-index: 2; pointer-events: none; width: clamp(110px, 15vw, 210px); inset-inline-end: -5%; bottom: -9%; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.7)); }
.mm-art img { width: 100%; height: auto; animation: mm-bob 6s ease-in-out infinite; }
.mm-chapter.flip .mm-art { inset-inline-end: auto; inset-inline-start: -5%; }
@keyframes mm-bob { 50% { transform: translateY(-10px) rotate(1.5deg); } }

/* ---------- the opening film: a temple around the screen ---------- */
.mm-film { padding: clamp(40px, 5vw, 72px) 0; text-align: center; isolation: isolate; }
.mm-film::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tint-2) 88%, transparent) 18%, color-mix(in srgb, var(--tint-2) 88%, transparent) 82%, transparent); }
.mm-head { max-width: 760px; margin: 0 auto clamp(20px, 3vw, 34px); padding-inline: var(--gutter, 20px); }
.mm-head .mm-num { justify-content: center; }
.mm-head .mm-num::before { content: ''; width: 72px; height: 12px; background: var(--mm-key) 0 50% / 24px 12px repeat-x; }
.mm-head h2 { margin: 8px 0 10px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.08; color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.85); text-wrap: balance; }
.mm-head p { margin: 0 auto; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); max-width: 36em; }
.mm-temple { position: relative; width: min(1080px, calc(100% - 2 * var(--gutter, 20px))); margin: 0 auto; padding: 0 clamp(34px, 6vw, 84px) 26px; }
.mm-pediment { display: block; height: clamp(40px, 7vw, 86px); margin: 0 calc(-1 * clamp(34px, 6vw, 84px)); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #fff3c4, var(--mm-gold) 55%, color-mix(in srgb, var(--mm-gold) 60%, #7a3b00)); position: relative; }
.mm-pediment::after { content: ''; position: absolute; inset: 22% 8% 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: color-mix(in srgb, var(--tint-2) 92%, #000); }
.mm-lintel { display: block; height: 26px; margin: 0 calc(-1 * clamp(34px, 6vw, 84px)) 0; background: var(--mm-key) center / 48px 22px repeat-x, linear-gradient(180deg, #2b2060, #15103a); border-block: 3px solid var(--mm-gold); }
.mm-col { position: absolute; top: calc(clamp(40px, 7vw, 86px) + 26px); bottom: 0; width: clamp(24px, 4.4vw, 60px); border-radius: 6px 6px 3px 3px;
  background: repeating-linear-gradient(90deg, #fff7e0 0 12%, #d9c48c 12% 20%, #fffaf0 20% 32%), #fff7e0; box-shadow: inset 0 14px 0 -2px #e8d59b, inset 0 -18px 0 -2px #e8d59b, 0 20px 30px -14px rgba(0, 0, 0, 0.9); }
.mm-col.l { inset-inline-start: 0; } .mm-col.r { inset-inline-end: 0; }
.mm-screen { position: relative; border: 5px solid #0a0820; box-shadow: 0 0 0 2px var(--mm-gold), 0 0 120px -20px color-mix(in srgb, var(--mm-gold) 80%, transparent); border-radius: 6px; overflow: hidden; }
.mm-screen .video { border-radius: 0; display: block; width: 100%; }
.mm-steps { display: block; height: 22px; margin: 0 calc(-1 * clamp(34px, 6vw, 84px) - 14px); background: linear-gradient(180deg, #fff7e0 0 45%, #d9c48c 45% 55%, #f3e6bd 55%); border-radius: 3px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.95); }
.mm-film figcaption { margin-top: 14px; font-family: var(--font-hand); font-size: 1.1rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }

/* ---------- the game show ---------- */
.mm-show { padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.mm-show::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 50% 50%, color-mix(in srgb, var(--tint-1) 78%, transparent), color-mix(in srgb, var(--tint-2) 70%, transparent) 70%, transparent); }
.mm-show-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mm-show-vids figure { margin: 0; }
.mm-show-vids .video { border-radius: 20px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-gold) 55%, transparent), 0 34px 60px -34px rgba(0, 0, 0, 0.95); }
.mm-show-vids figcaption { margin-top: 10px; text-align: center; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.mm-show .ev-credits { margin-top: 26px; }

/* ---------- the wall ---------- */
.mm-wall-sec { padding: clamp(40px, 5vw, 72px) 0; }
.mm-wall-sec .masonry { --row: clamp(190px, 25vw, 340px); gap: 14px; }
.mm-wall-sec .masonry .g-item { border-radius: 20px; box-shadow: 0 30px 50px -32px rgba(0, 0, 0, 0.95); }
.mm-wall-sec .btn-row { margin-top: 26px; }

/* ---------- keepsake: the flyer as an artifact ---------- */
.mm-keep { padding: clamp(30px, 4vw, 60px) 0; }
.mm-keep-grid { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 30px clamp(30px, 5vw, 70px); align-items: center; max-width: 940px; margin-inline: auto; }
.mm-flyer { position: relative; display: block; width: clamp(180px, 22vw, 270px); padding: 8px 8px 30px; border: 0; background: #fffaf0; border-radius: 4px; cursor: zoom-in; transform: rotate(-4deg); box-shadow: 0 34px 50px -24px rgba(0, 0, 0, 0.95); transition: transform 0.5s var(--ease-spring); }
.mm-flyer::before { content: ''; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; translate: -50% 0; rotate: 3deg; background: rgba(255, 236, 170, 0.75); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.mm-flyer img { display: block; width: 100%; height: auto; }
.mm-flyer span { position: absolute; inset-inline: 0; bottom: 5px; text-align: center; font-family: var(--font-hand); font-size: 0.95rem; color: #3a2a10; }
.mm-flyer:hover, .mm-flyer:focus-visible { transform: rotate(0) scale(1.04); }
.mm-keep h2 { margin: 6px 0 14px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85); }
.mm-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: 1.1rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.mm-facts dt { font-family: var(--font-hand); font-weight: 700; color: var(--mm-gold); }
.mm-facts dd { margin: 0; color: #fff; font-weight: 700; }
.mm-partner { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; color: #fff; text-decoration: none; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.mm-partner img { height: 58px; width: auto; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }

/* ---------- the end ---------- */
.mm-end { padding: clamp(30px, 4vw, 60px) 0 clamp(30px, 4vw, 60px); text-align: center; isolation: isolate; }
.mm-end::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tint-2) 94%, transparent) 40%); }
.mm-stars { display: block; width: clamp(190px, 22vw, 290px); height: auto; margin: 0 auto 6px; animation: mm-twinkle 5s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(120, 140, 255, 0.6)); }
@keyframes mm-twinkle { 50% { filter: drop-shadow(0 0 60px rgba(160, 180, 255, 0.95)) brightness(1.15); transform: scale(1.03); } }
.mm-end h2 { margin: 0 0 10px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.6rem); color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.85); }
.mm-end > .wrap-narrow > p { margin: 0 auto; max-width: 34em; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.7; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
.mm-next { margin: clamp(30px, 4vw, 50px) auto 0; padding-top: 22px; max-width: 760px; border-top: 1px solid color-mix(in srgb, var(--mm-gold) 35%, transparent); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; font-size: 1rem; color: var(--text-soft, #d9cbf5); }
.mm-next a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.mm-next a svg { width: 16px; height: 16px; color: var(--mm-gold); transition: transform 0.4s var(--ease-spring); }
.mm-next a:hover { color: var(--mm-gold); }
.mm-next a:hover svg { transform: translateX(-4px); }

/* Hades takes the page */
body.villain[data-villain="hades"] .mm-hero .ev-logo:not(.ev-logo-v) { display: none; }
body.villain[data-villain="hades"] .mm-hero .ev-logo-v.v-hades { display: block; filter: drop-shadow(0 0 30px rgba(60, 160, 255, 0.8)); }

@media (max-width: 900px) {
  .mm-ch-grid, .mm-chapter.flip .mm-ch-grid { grid-template-columns: 1fr; gap: 22px; }
  .mm-chapter.flip .mm-ch-text { order: 0; }
  .mm-ch-text { text-align: center; } .mm-prose p { margin-inline: auto; } .mm-num { justify-content: center; } .mm-num::before { content: ''; width: 48px; height: 12px; background: var(--mm-key) 0 50% / 24px 12px repeat-x; } .mm-num::after { width: 48px; }
  .mm-water { top: 0; font-size: clamp(3.4rem, 19vw, 7rem); inset-inline: 0 !important; text-align: center; }
  .mm-ch-photos { gap: 8px; } .mm-ph { border-radius: 14px; --span: 3 !important; } .mm-ph.lead { border-radius: 18px; }
  .mm-ph.odd-last { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .mm-art { width: 96px; bottom: -6%; inset-inline-end: 0; } .mm-chapter.flip .mm-art { inset-inline-start: 0; }
  .mm-show-vids { grid-template-columns: 1fr; }
  .mm-keep-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .mm-facts { text-align: start; }
  .mm-hero { min-height: min(92svh, 820px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-hero-photo, .mm-hero::after, .mm-kicker, .mm-hero .ev-logo, .mm-hero-line, .mm-hero-meta, .mm-scroll, .mm-scroll svg, .mm-art img, .mm-stars { animation: none !important; }
  .mm-ph { clip-path: none !important; transition: none; } .mm-ph img { transform: none !important; transition: none; }
}


/* =====================================================================
   Shared extras
   ===================================================================== */
.mm-credit { margin: 14px 0 0; text-align: center; font-size: 0.95rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); opacity: 0.85; }
.mm-more { display: grid; gap: 20px; margin-top: clamp(26px, 3.4vw, 44px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-more.n1 { grid-template-columns: minmax(0, 560px); justify-content: center; } .mm-more.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.mm-more figure { margin: 0; } .mm-more .video { border-radius: 18px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-gold) 50%, transparent), 0 30px 50px -32px rgba(0, 0, 0, 0.95); }
.mm-more figcaption { margin-top: 8px; font-family: var(--font-round); font-weight: 700; font-size: 1rem; }
.mm-stars.plain { animation: mm-bob 6s ease-in-out infinite; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.7)); width: clamp(170px, 20vw, 260px); margin-bottom: 8px; }
.mm-frame { position: relative; width: min(1040px, calc(100% - 2 * var(--gutter, 20px))); margin: 0 auto; }
/* hero with a painting and a stack of snapshots */
.mm-hero.art { min-height: min(100svh, 900px); }
.mm-hero.art .mm-hero-photo { inset: -4% -3% 0; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.mm-hero.art .mm-hero-in { position: relative; z-index: 2; padding-bottom: clamp(200px, 25vw, 300px); }
.mm-stack { position: absolute; z-index: 3; inset-inline: 0; bottom: 46px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.6vw, 22px); padding-inline: 12px; pointer-events: none; }
.mm-snap { pointer-events: auto; flex: 0 1 clamp(150px, 21vw, 290px); padding: 7px 7px 26px; border: 0; background: #fffaf0; border-radius: 4px; cursor: zoom-in; box-shadow: 0 30px 46px -22px rgba(0, 0, 0, 0.95);
  rotate: calc((var(--i) - 1) * 5deg); translate: 0 calc(abs(var(--i) - 1) * 14px); animation: mm-deal 1s var(--ease-spring) calc(1.1s + var(--i) * 0.16s) both; transition: rotate 0.45s var(--ease-spring), translate 0.45s var(--ease-spring), scale 0.45s var(--ease-spring); }
.mm-snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-snap:hover, .mm-snap:focus-visible { rotate: 0deg; translate: 0 -12px; scale: 1.06; z-index: 2; }
@keyframes mm-deal { from { opacity: 0; transform: translateY(80px) rotate(12deg); } }
@media (max-width: 700px) { .mm-hero.art .mm-hero-in { padding-bottom: 150px; } .mm-stack { bottom: 40px; gap: 6px; } .mm-snap { padding: 4px 4px 14px; flex-basis: 31%; } }

/* =====================================================================
   THE LION KING: a premiere at sunrise   (body.savanna)
   warm earth and sun, a red-carpet marquee, acts instead of chapters
   ===================================================================== */
body.savanna.memory-page { --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 22 12 4l12 18L36 4l12 18' fill='none' stroke='%23fbbf24' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='19' r='2.2' fill='%23f97316'/%3E%3Ccircle cx='36' cy='19' r='2.2' fill='%23f97316'/%3E%3C/svg%3E"); }
.mm-rays { position: absolute; z-index: -2; left: 50%; top: 46%; width: 190vmax; height: 190vmax; translate: -50% -50%; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.34) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 62%); mask-image: radial-gradient(closest-side, #000 8%, transparent 62%); animation: mm-spin 90s linear infinite; }
@keyframes mm-spin { to { rotate: 360deg; } }
body.savanna .mm-hero::before { background: radial-gradient(60% 46% at 50% 46%, rgba(255, 200, 90, 0.28), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--tint-2) 66%, transparent), transparent 24%, transparent 50%, color-mix(in srgb, var(--tint-2) 90%, transparent) 92%); }
body.savanna .mm-hero .ev-logo { width: min(86vw, 720px); }
body.savanna .mm-chapter::before { background: radial-gradient(70% 70% at var(--gx, 70%) 50%, rgba(80, 22, 6, 0.86), rgba(60, 16, 5, 0.5) 60%, transparent 85%); }
body.savanna .mm-water { -webkit-text-stroke: 1.5px rgba(251, 191, 36, 0.4); }
body.savanna .mm-ph { border-radius: 8px; clip-path: inset(0 100% 0 0); }
body.savanna .mm-chapter.flip .mm-ph { clip-path: inset(0 0 0 100%); }
body.savanna .mm-chapter.in .mm-ph { clip-path: inset(0); }
body.savanna .mm-ph.lead { border-radius: 10px; box-shadow: 0 0 0 5px #fffaf0, 0 0 0 7px rgba(251, 191, 36, 0.7), 0 44px 70px -40px rgba(0, 0, 0, 0.95), 0 0 110px -30px rgba(249, 115, 22, 0.9); }
body.savanna .mm-film::before, body.savanna .mm-show::before { background: linear-gradient(180deg, transparent, rgba(40, 10, 4, 0.9) 18%, rgba(40, 10, 4, 0.9) 82%, transparent); }
.mm-frame-marquee { padding: 30px 26px; border-radius: 20px; background: linear-gradient(180deg, #5a1408, #2a0904); box-shadow: 0 0 0 3px #fbbf24, 0 0 0 9px #7c2d12, 0 0 0 11px rgba(251, 191, 36, 0.6), 0 50px 80px -40px rgba(0, 0, 0, 0.95), 0 0 120px -30px rgba(251, 191, 36, 0.8); }
.mm-frame-marquee .mm-f-top, .mm-frame-marquee .mm-f-bottom { position: absolute; inset-inline: 22px; display: flex; justify-content: space-between; }
.mm-frame-marquee .mm-f-top { top: 10px; } .mm-frame-marquee .mm-f-bottom { bottom: 10px; }
.mm-frame-marquee i { width: 10px; height: 10px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 12px 4px rgba(255, 200, 90, 0.95); animation: mm-bulb 1.5s steps(1) infinite; }
.mm-frame-marquee i:nth-child(3n + 1) { animation-delay: -0.5s; } .mm-frame-marquee i:nth-child(3n + 2) { animation-delay: -1s; }
@keyframes mm-bulb { 0%, 66% { opacity: 1; } 33% { opacity: 0.22; } }
.mm-frame-marquee .mm-screen { border-radius: 8px; border-color: #160502; }
body.savanna .mm-end::before { background: linear-gradient(180deg, transparent, rgba(30, 8, 3, 0.94) 40%); }
@media (max-width: 700px) { .mm-frame-marquee { padding: 24px 12px; } .mm-frame-marquee i:nth-child(2n) { display: none; } }

/* =====================================================================
   MULAN: ink, silk and blossom   (body.blossom)
   a scroll painting: seals instead of chapter numbers, a hanging scroll around the film
   ===================================================================== */
body.blossom.memory-page { --mm-seal: #c8202b; --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 12h8a6 6 0 1 1 6 6h20a6 6 0 1 1 6-6h8' fill='none' stroke='%23ffd27a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.blossom .mm-hero-photo { -webkit-mask-image: radial-gradient(120% 78% at 50% 34%, #000 58%, transparent 96%); mask-image: radial-gradient(120% 78% at 50% 34%, #000 58%, transparent 96%); }
body.blossom .mm-hero::after { background: radial-gradient(40% 50% at 82% 20%, rgba(255, 143, 168, 0.55), transparent 70%), radial-gradient(36% 44% at 14% 30%, rgba(255, 210, 122, 0.4), transparent 70%); }
body.blossom .mm-hero-line { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.mm-branch { position: absolute; z-index: 1; top: calc(var(--header-h, 80px) + 6px); right: -34px; width: clamp(200px, 30vw, 430px); pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); transform-origin: 50% 0; scale: -1 1; animation: mm-sway 9s ease-in-out infinite alternate; }
@keyframes mm-sway { from { rotate: -1.5deg; } to { rotate: 2.5deg; } }
body.blossom .mm-num { gap: 12px; color: #fff; }
body.blossom .mm-num b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: var(--mm-seal); color: #fff2e0; font-family: var(--font-hand); font-size: 1.6rem; font-weight: 800; rotate: -6deg; box-shadow: inset 0 0 0 2px rgba(255, 242, 224, 0.75), inset 0 0 0 4px var(--mm-seal), 0 8px 18px -8px rgba(0, 0, 0, 0.8); }
body.blossom .mm-chapter::before { background: radial-gradient(70% 70% at var(--gx, 70%) 50%, rgba(8, 34, 48, 0.88), rgba(8, 34, 48, 0.5) 60%, transparent 85%); }
body.blossom .mm-water { -webkit-text-stroke: 1.5px rgba(255, 143, 168, 0.45); }
body.blossom .mm-ph { border-radius: 50% 50% 14px 14px / 28% 28% 14px 14px; clip-path: circle(0% at 50% 40%); transition: clip-path 1.3s var(--ease-out) calc(var(--i) * 0.12s), transform 0.5s var(--ease-spring); }
body.blossom .mm-chapter.in .mm-ph { clip-path: circle(120% at 50% 40%); }
body.blossom .mm-ph.lead { border-radius: 26px; box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.7), 0 44px 70px -40px rgba(0, 0, 0, 0.95), 0 0 100px -30px rgba(255, 143, 168, 0.85); }
body.blossom .mm-film::before, body.blossom .mm-show::before { background: linear-gradient(180deg, transparent, rgba(6, 26, 38, 0.9) 16%, rgba(6, 26, 38, 0.9) 84%, transparent); }
.mm-frame-scroll { padding: 34px clamp(16px, 3vw, 40px); background: linear-gradient(90deg, #ead9b4, #fbf1d8 12%, #fbf1d8 88%, #ead9b4); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.95), 0 0 110px -36px rgba(255, 143, 168, 0.8); }
.mm-frame-scroll .mm-f-top, .mm-frame-scroll .mm-f-bottom { position: absolute; inset-inline: -22px; height: 26px; border-radius: 13px; background: linear-gradient(180deg, #8a4a24, #4a2410 60%, #6b3518); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.9); }
.mm-frame-scroll .mm-f-top { top: -13px; } .mm-frame-scroll .mm-f-bottom { bottom: -13px; }
.mm-frame-scroll .mm-f-top::before, .mm-frame-scroll .mm-f-top::after, .mm-frame-scroll .mm-f-bottom::before, .mm-frame-scroll .mm-f-bottom::after { content: ''; position: absolute; top: -4px; width: 16px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, #ffd27a, #b8802a); }
.mm-frame-scroll .mm-f-top::before, .mm-frame-scroll .mm-f-bottom::before { left: -6px; } .mm-frame-scroll .mm-f-top::after, .mm-frame-scroll .mm-f-bottom::after { right: -6px; }
.mm-frame-scroll .mm-screen { border: 3px solid #4a2410; box-shadow: 0 0 0 2px var(--mm-seal); border-radius: 2px; }
.mm-frame-scroll figcaption { color: #4a2410; text-shadow: none; margin: 12px 0 -14px; }
body.blossom .mm-end::before { background: linear-gradient(180deg, transparent, rgba(5, 20, 30, 0.94) 40%); }
body.blossom .mm-wall-sec .masonry .g-item { border-radius: 26px 6px 26px 6px; }
@media (max-width: 900px) { body.blossom .mm-num::before, body.blossom .mm-num::after { display: none; } .mm-branch { width: 190px; opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .mm-rays, .mm-frame-marquee i, .mm-branch, .mm-snap { animation: none !important; } }

body.blossom .mm-hero .ev-logo { width: min(60vw, 380px); }
body.blossom .mm-hero-photo { inset: 0 -2% 20%; }


/* ---------- story in beats, letters ---------- */
.mm-story, .mm-letters { padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.mm-story::before, .mm-letters::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 50% 50%, color-mix(in srgb, var(--tint-2) 86%, transparent), color-mix(in srgb, var(--tint-2) 56%, transparent) 70%, transparent); }
.mm-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3.4vw, 44px); position: relative; }
.mm-beats::before { content: ''; position: absolute; inset-block: 10px; inset-inline-start: 27px; width: 2px; background: linear-gradient(180deg, transparent, var(--mm-gold) 12%, var(--mm-gold) 88%, transparent); opacity: 0.6; }
.mm-beats li { position: relative; padding-inline-start: 84px; }
.mm-beat-n { position: absolute; inset-inline-start: 0; top: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; font-size: 1.7rem; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--mm-gold) 60%, color-mix(in srgb, var(--mm-gold) 60%, #7a3b00)); box-shadow: 0 0 30px -4px var(--mm-gold), 0 10px 20px -8px rgba(0, 0, 0, 0.8); }
.mm-beats h3 { margin: 4px 0 8px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; color: #fff; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85); }
.mm-beats p { margin: 0 0 0.7em; font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.75; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
.mm-letter-wall { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 22px; }
.mm-letter { break-inside: avoid; margin: 0 0 22px; padding: 20px 22px 22px; border-radius: 6px 22px 6px 22px; color: #2a1608; background: linear-gradient(170deg, #fff8e6, #f7e6c0); box-shadow: 0 30px 46px -28px rgba(0, 0, 0, 0.95); rotate: var(--r); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.mm-letter:hover { rotate: 0deg; transform: translateY(-5px); }
.mm-letter header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mm-letter header img, .mm-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--mm-gold); }
.mm-av { display: grid; place-items: center; background: var(--tint-1); color: #fff; font-family: var(--font-hand); font-weight: 800; font-size: 1.3rem; }
.mm-letter strong { font-family: var(--font-hand); font-size: 1.2rem; }
.mm-letter-text p { margin: 0 0 0.6em; font-size: 1.02rem; line-height: 1.7; white-space: pre-line; }
.mm-letter details > summary { list-style: none; cursor: pointer; }
.mm-letter details > summary::-webkit-details-marker { display: none; }
.mm-letter details > summary b { display: inline-block; margin-top: 4px; min-height: 44px; line-height: 44px; color: #8a3b00; text-decoration: underline; }
.mm-letter details[open] > summary { display: none; }

/* =====================================================================
   TARZAN: the jungle   (body.jungle)
   vines, leaves, green light; Tarzan swings across the hero
   ===================================================================== */
body.jungle.memory-page { --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 12c8-10 16-10 24 0s16 10 24 0' fill='none' stroke='%235ad67d' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 5c4-4 9-4 12 0-4 3-9 3-12 0zM36 19c4 4 9 4 12 0-4-3-9-3-12 0z' fill='%23f4d35e'/%3E%3C/svg%3E"); }
.mm-swing { position: absolute; z-index: 2; top: -4%; inset-inline-start: 12%; width: clamp(110px, 15vw, 230px); transform-origin: 50% 0; pointer-events: none; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.6)); animation: mm-swing 5.5s ease-in-out infinite alternate; }
.mm-swing img { width: 100%; height: auto; }
@keyframes mm-swing { from { rotate: 16deg; } to { rotate: -14deg; } }
.mm-vines { position: absolute; z-index: 1; inset: 0 0 auto; height: 46%; pointer-events: none; opacity: 0.9;
  background: radial-gradient(60px 190px at 8% 0, #0c3d1c 60%, transparent 62%), radial-gradient(44px 260px at 21% 0, #14532d 60%, transparent 62%), radial-gradient(70px 150px at 38% 0, #0c3d1c 60%, transparent 62%), radial-gradient(50px 230px at 63% 0, #14532d 60%, transparent 62%), radial-gradient(64px 170px at 80% 0, #0c3d1c 60%, transparent 62%), radial-gradient(46px 280px at 94% 0, #14532d 60%, transparent 62%); filter: blur(1px); }
body.jungle .mm-hero::before { background: radial-gradient(60% 50% at 50% 30%, rgba(180, 255, 170, 0.16), transparent 70%), linear-gradient(180deg, rgba(4, 23, 12, 0.6), transparent 26%, transparent 46%, rgba(4, 23, 12, 0.8) 68%, rgba(4, 23, 12, 0.97) 90%); }
body.jungle .mm-chapter::before { background: radial-gradient(70% 70% at var(--gx, 70%) 50%, rgba(4, 30, 14, 0.9), rgba(4, 30, 14, 0.52) 60%, transparent 85%); }
body.jungle .mm-water { -webkit-text-stroke: 1.5px rgba(90, 214, 125, 0.42); }
body.jungle .mm-ph { border-radius: 46% 54% 50% 50% / 16% 16% 12% 12%; clip-path: inset(100% 0 0 0); }
body.jungle .mm-chapter.in .mm-ph { clip-path: inset(0); }
body.jungle .mm-ph:nth-child(even) { border-radius: 54% 46% 50% 50% / 12% 12% 16% 16%; }
body.jungle .mm-ph.lead { border-radius: 38px 120px 38px 120px / 38px 60px 38px 60px; box-shadow: 0 0 0 2px rgba(244, 211, 94, 0.65), 0 44px 70px -40px rgba(0, 0, 0, 0.95), 0 0 100px -30px rgba(90, 214, 125, 0.9); }
body.jungle .mm-film::before, body.jungle .mm-show::before { background: linear-gradient(180deg, transparent, rgba(3, 20, 10, 0.92) 16%, rgba(3, 20, 10, 0.92) 84%, transparent); }
.mm-frame-vines { padding: 22px; border-radius: 30px; background: linear-gradient(160deg, #3b2a14, #1f1408); box-shadow: inset 0 0 0 3px #6b4a22, 0 0 0 3px #14532d, 0 50px 80px -40px rgba(0, 0, 0, 0.95), 0 0 120px -34px rgba(90, 214, 125, 0.85); }
.mm-frame-vines .mm-f-top, .mm-frame-vines .mm-f-bottom { position: absolute; inset-inline: -10px; height: 40px; background: var(--mm-key) center / 64px 32px repeat-x; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.mm-frame-vines .mm-f-top { top: -18px; } .mm-frame-vines .mm-f-bottom { bottom: -18px; scale: 1 -1; }
.mm-frame-vines .mm-screen { border-radius: 14px; border-color: #0c2a14; }
body.jungle .mm-wall-sec .masonry .g-item { border-radius: 30px 8px 30px 8px; }
body.jungle .mm-end::before { background: linear-gradient(180deg, transparent, rgba(2, 16, 8, 0.95) 40%); }

/* =====================================================================
   ALADDIN: one night in Agrabah   (body.agrabah)
   arches, lamps and gold on a deep night; the story is told in words and letters
   ===================================================================== */
body.agrabah.memory-page { --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 22c0-12 6-20 12-20s12 8 12 20c0-12 6-20 12-20s12 8 12 20' fill='none' stroke='%23ffd166' stroke-width='2.6'/%3E%3Ccircle cx='12' cy='14' r='2.4' fill='%23ff8f5a'/%3E%3Ccircle cx='36' cy='14' r='2.4' fill='%23ff8f5a'/%3E%3C/svg%3E"); }
body.agrabah .mm-hero.art .mm-hero-photo { filter: saturate(1.15) brightness(0.62) hue-rotate(-12deg); }
body.agrabah .mm-hero::before { background: radial-gradient(50% 40% at 50% 34%, rgba(255, 209, 102, 0.3), transparent 70%), linear-gradient(180deg, rgba(22, 11, 51, 0.82), rgba(60, 24, 110, 0.4) 40%, rgba(22, 11, 51, 0.96) 92%); }
body.agrabah .mm-hero.art .mm-hero-in { padding-bottom: clamp(40px, 6vw, 80px); }
body.agrabah .mm-hero .ev-logo { width: min(80vw, 620px); filter: drop-shadow(0 0 34px rgba(255, 209, 102, 0.7)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.9)); }
.mm-lamps { position: absolute; z-index: 1; inset: 0 0 auto; height: 50%; pointer-events: none; }
.mm-lamps i { position: absolute; top: 0; left: var(--x); width: 2px; height: var(--h); background: linear-gradient(180deg, transparent, rgba(255, 209, 102, 0.8)); transform-origin: 50% 0; animation: mm-sway 6s ease-in-out infinite alternate; animation-delay: var(--d); }
.mm-lamps i::after { content: ''; position: absolute; bottom: -34px; left: 50%; width: 26px; height: 36px; translate: -50% 0; border-radius: 50% 50% 46% 46% / 34% 34% 66% 66%; background: radial-gradient(circle at 50% 60%, #fff3c4, #ffd166 45%, #ff8f5a); box-shadow: 0 0 34px 10px rgba(255, 190, 90, 0.6); }
body.agrabah .mm-film::before { background: linear-gradient(180deg, transparent, rgba(18, 8, 44, 0.92) 16%, rgba(18, 8, 44, 0.92) 84%, transparent); }
.mm-frame-arch { padding: clamp(60px, 9vw, 120px) clamp(18px, 3vw, 40px) 30px; border-radius: 50% 50% 18px 18px / 26% 26% 18px 18px; background: linear-gradient(180deg, #4a2a7a, #1d0e44); box-shadow: inset 0 0 0 4px #ffd166, inset 0 0 0 10px #2a1454, inset 0 0 0 12px rgba(255, 209, 102, 0.55), 0 50px 80px -40px rgba(0, 0, 0, 0.95), 0 0 120px -34px rgba(255, 209, 102, 0.8); }
.mm-frame-arch .mm-f-top { position: absolute; top: clamp(16px, 2.6vw, 34px); left: 50%; width: 44px; height: 44px; translate: -50% 0; rotate: 45deg; border-radius: 8px; background: linear-gradient(135deg, #fff3c4, #ffd166 50%, #ff8f5a); box-shadow: 0 0 30px 4px rgba(255, 209, 102, 0.8); }
.mm-frame-arch .mm-screen { border-radius: 10px; }
body.agrabah .mm-end::before { background: linear-gradient(180deg, transparent, rgba(14, 6, 36, 0.95) 40%); }
@media (max-width: 900px) { .mm-beats li { padding-inline-start: 70px; } .mm-swing { inset-inline-start: 2%; width: 100px; } .mm-frame-arch { border-radius: 40% 40% 14px 14px / 12% 12% 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .mm-swing, .mm-lamps i { animation: none !important; } .mm-letter { rotate: 0deg; } }

body.agrabah .mm-hero.art .mm-hero-in { padding-bottom: clamp(200px, 25vw, 300px); }
@media (max-width: 700px) { body.agrabah .mm-hero.art .mm-hero-in { padding-bottom: 150px; } }

/* a chapter with its own painted backdrop */
.mm-ch-bg { position: absolute; inset: -14% 0; z-index: -3; background: var(--img) center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.mm-chapter.has-bg { overflow: clip; }
.mm-chapter.has-bg::before { background: radial-gradient(70% 80% at var(--gx, 70%) 50%, color-mix(in srgb, var(--tint-2) 84%, transparent), color-mix(in srgb, var(--tint-2) 46%, transparent) 65%, color-mix(in srgb, var(--tint-2) 20%, transparent)) !important; }
.mm-ch-bg.end { inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.mm-end.has-bg::before { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tint-2) 62%, transparent) 40%, color-mix(in srgb, var(--tint-2) 90%, transparent)) !important; }
.mm-ch-btn { margin-top: 18px; }
.mm-art.wide { width: clamp(170px, 22vw, 320px); bottom: -7%; }
@media (max-width: 900px) { .mm-ch-btn { justify-content: center; } .mm-art.wide { width: 150px; } }


/* =====================================================================
   BELLE, THE TRAILER: noir   (body.noir)
   A living blurred frame behind everything, light through blinds, grain, amber against teal.
   ===================================================================== */
body.noir.memory-page { --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Crect x='4' y='6' width='14' height='12' rx='2' fill='none' stroke='%23e8b04a' stroke-width='2'/%3E%3Crect x='28' y='6' width='14' height='12' rx='2' fill='none' stroke='%23e8b04a' stroke-width='2'/%3E%3C/svg%3E"); background: #10161a; }
body.noir .sky { background: linear-gradient(180deg, #1d2a30, #0c1114 70%) !important; }
body.noir .ev-back i { inset: -10%; filter: blur(14px) saturate(1.15) brightness(0.72) contrast(1.1) !important; opacity: 1 !important; }
body.noir .ev-back::after { background: linear-gradient(180deg, rgba(10, 16, 20, 0.35), rgba(10, 16, 20, 0.5)) !important; mix-blend-mode: normal; }
body.noir .ev-blob.b1 { background: radial-gradient(closest-side, rgba(232, 176, 74, 0.75), transparent) !important; opacity: 0.5 !important; }
body.noir .ev-blob.b2 { background: radial-gradient(closest-side, rgba(79, 179, 191, 0.75), transparent) !important; opacity: 0.45 !important; }
body.noir .ev-blob.b3 { background: radial-gradient(closest-side, rgba(200, 60, 40, 0.5), transparent) !important; opacity: 0.35 !important; }
/* light through blinds + grain + vignette, over the whole page */
body.noir main::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.55;
  background: repeating-linear-gradient(168deg, rgba(255, 236, 190, 0.5) 0 26px, transparent 26px 74px); -webkit-mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent 75%); animation: mm-blinds 18s ease-in-out infinite alternate; }
@keyframes mm-blinds { from { transform: translate3d(-3%, -2%, 0) rotate(-1deg); } to { transform: translate3d(3%, 2%, 0) rotate(1.5deg); } }
body.noir main::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 50%, transparent 55%, #000); }
body.noir main > section { z-index: 1; }
body.noir .mm-hero { min-height: min(100svh, 900px); }
body.noir .mm-hero-photo { inset: 0 -3% 24%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%); mask-image: linear-gradient(180deg, #000 60%, transparent 98%); filter: contrast(1.1) saturate(0.9); }
body.noir .mm-hero::before { background: linear-gradient(180deg, rgba(10, 16, 20, 0.7), transparent 22%, transparent 46%, rgba(10, 16, 20, 0.78) 68%, rgba(10, 16, 20, 0.96) 90%); }
body.noir .mm-hero::after { opacity: 0.5; background: radial-gradient(40% 50% at 80% 20%, rgba(232, 176, 74, 0.6), transparent 70%), radial-gradient(36% 44% at 14% 34%, rgba(79, 179, 191, 0.5), transparent 70%); }
.mm-title-noir { margin: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(3.2rem, 9.5vw, 7.4rem); line-height: 1; color: #f7efdc; text-shadow: 0 0 50px rgba(232, 176, 74, 0.6), 0 8px 30px #000; animation: mm-logo 1.3s var(--ease-spring) 0.35s both; }
.mm-title-noir small { display: block; margin-top: 0.12em; font-size: 0.42em; font-weight: 700; color: #e8b04a; letter-spacing: 0.02em; }
body.noir .mm-hero-line { font-family: var(--font-round); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.7rem); }
body.noir .mm-chapter::before, body.noir .mm-film::before, body.noir .mm-show::before, body.noir .mm-story::before, body.noir .mm-compare::before,
body.noir .mm-script::before, body.noir .mm-stripsec::before, body.noir .mm-loops::before, body.noir .mm-audio::before, body.noir .mm-wall-sec::before {
  content: ''; position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none;
  background: radial-gradient(90% 85% at 50% 50%, rgba(10, 16, 20, 0.78), rgba(10, 16, 20, 0.5) 60%, rgba(10, 16, 20, 0.15) 100%); }
body.noir .mm-water { -webkit-text-stroke: 1.5px rgba(232, 176, 74, 0.4); }
body.noir .mm-ph { border-radius: 3px; aspect-ratio: 2.39 / 1; clip-path: inset(50% 0 50% 0); }
body.noir .mm-chapter.in .mm-ph { clip-path: inset(0); }
body.noir .mm-ph.lead { border-radius: 3px; aspect-ratio: 2.39 / 1; box-shadow: 0 0 0 1px rgba(232, 176, 74, 0.7), 0 40px 70px -40px #000, 0 0 110px -36px rgba(79, 179, 191, 0.9); }
.mm-frame-letterbox { padding: clamp(26px, 4vw, 54px) 0; background: #000; box-shadow: 0 0 0 1px rgba(232, 176, 74, 0.6), 0 60px 90px -40px #000, 0 0 160px -40px rgba(232, 176, 74, 0.7); }
.mm-frame-letterbox .mm-screen { border: 0; border-radius: 0; box-shadow: none; }
.mm-frame-letterbox .mm-f-top, .mm-frame-letterbox .mm-f-bottom { position: absolute; inset-inline: 0; height: clamp(26px, 4vw, 54px); background: var(--mm-key) center / 48px 22px repeat-x; opacity: 0.4; }
.mm-frame-letterbox .mm-f-top { top: 0; } .mm-frame-letterbox .mm-f-bottom { bottom: 0; }
.mm-film-btn { margin-top: clamp(30px, 4vw, 50px); }
body.noir .mm-beat-n { background: #10161a; box-shadow: inset 0 0 0 2px #e8b04a, 0 0 26px -6px #e8b04a; color: #e8b04a; font-family: var(--font-hand); font-weight: 800; font-size: 1.15rem; }
body.noir .mm-wall-sec .masonry { --row: clamp(150px, 17vw, 240px); gap: 10px; }
body.noir .mm-wall-sec .masonry .g-item { border-radius: 3px; }
body.noir .mm-end::before { background: linear-gradient(180deg, transparent, rgba(8, 12, 15, 0.92) 40%); }
body.noir .mm-end h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
body.noir .mm-end > .wrap-narrow > p { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; color: #f7efdc; }
body.noir .ev-credits ul { gap: 18px 40px; }
/* script pages */
.mm-script, .mm-stripsec, .mm-loops, .mm-audio { padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.mm-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.mm-page { position: relative; padding: 46px 24px 26px; background: linear-gradient(175deg, #fbf6e9, #efe4c8); color: #1d1a14; border-radius: 3px; rotate: var(--r); box-shadow: 0 34px 50px -30px #000; font-family: 'Courier New', 'Miriam Mono CLM', monospace; transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.mm-page:hover { rotate: 0deg; transform: translateY(-6px); }
.mm-page::before { content: ''; position: absolute; top: 12px; right: 50%; width: 12px; height: 12px; translate: 50% 0; border-radius: 50%; background: #10161a; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4); }
.mm-tc { position: absolute; top: 12px; inset-inline-start: 18px; font-weight: 700; font-size: 0.85rem; color: #a3341f; }
.mm-page p { margin: 0 0 0.7em; font-size: 0.98rem; line-height: 1.7; }
/* contact sheet */
.mm-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; background: #07090a; border: 1px solid rgba(232, 176, 74, 0.45); box-shadow: 0 40px 70px -40px #000; }
.mm-cell { position: relative; padding: 0; border: 0; background: #000; cursor: zoom-in; overflow: hidden; aspect-ratio: 2.39 / 1; }
.mm-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out), filter 0.4s; filter: saturate(0.9); }
.mm-cell span { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 8px 5px; font-size: 0.8rem; font-weight: 700; color: #fff; text-align: start; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); }
.mm-cell span:empty { display: none; }
.mm-cell:hover img, .mm-cell:focus-visible img { transform: scale(1.07); filter: none; }
/* loops */
.mm-loop-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-loop-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-loop-grid.n1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.mm-loop-grid figure { margin: 0; }
.mm-loop-grid video { display: block; width: 100%; height: auto; background: #000; box-shadow: 0 0 0 1px rgba(232, 176, 74, 0.5), 0 34px 60px -34px #000; }
.mm-loop-grid figcaption { margin-top: 10px; color: #fff; text-shadow: 0 2px 12px #000; line-height: 1.5; }
.mm-loop-grid figcaption b { display: block; font-family: var(--font-hand); font-size: 1.2rem; color: #e8b04a; }
/* tapes */
.mm-tapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mm-tapes li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 4px 20px; align-items: center; padding: 16px 20px; border-inline-start: 3px solid #e8b04a; background: linear-gradient(90deg, rgba(232, 176, 74, 0.14), rgba(10, 16, 20, 0.5)); }
.mm-tapes blockquote { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.3; color: #f7efdc; }
.mm-tapes small { grid-column: 1; color: #cfd8da; }
.mm-tapes audio { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 44px; }
@media (max-width: 900px) { .mm-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; } .mm-loop-grid, .mm-loop-grid.n2 { grid-template-columns: 1fr; } .mm-tapes li { grid-template-columns: 1fr; } .mm-tapes audio { grid-column: 1; grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { body.noir main::before { animation: none; } .mm-page { rotate: 0deg; } }
/* before / after */
.mm-compare { padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.mm-compare::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.mm-cmp-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-cmp-grid.n1 { grid-template-columns: minmax(0, 900px); justify-content: center; } .mm-cmp-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-cmp { margin: 0; }
.mm-cmp-box { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; box-shadow: 0 0 0 1px rgba(232, 176, 74, 0.5), 0 34px 60px -34px #000; }
.mm-cmp-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center !important; }
.mm-cmp-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); }
.mm-cmp-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, 0.8); pointer-events: none; }
.mm-cmp-line::after { content: '◂ ▸'; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #07090a; font-size: 0.85rem; font-weight: 900; letter-spacing: -1px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); direction: ltr; }
.mm-cmp-box input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; direction: ltr; }
.mm-cmp-box:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.mm-cmp-tag { position: absolute; top: 10px; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: rgba(0, 0, 0, 0.7); color: #fff; pointer-events: none; }
.mm-cmp-tag.a { right: 10px; } .mm-cmp-tag.b { left: 10px; }
.mm-cmp figcaption { margin-top: 10px; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 2px 12px #000; }
@media (max-width: 900px) { .mm-cmp-grid, .mm-cmp-grid.n2 { grid-template-columns: 1fr; } body.noir .mm-ph { --span: 6 !important; } }

.mm-cells.wide .mm-cell { aspect-ratio: 16 / 9; }
.mm-cmp-box { aspect-ratio: 2.39 / 1; }

.mm-show-vids:has(> figure:only-child) { grid-template-columns: minmax(0, 860px); justify-content: center; }


/* =====================================================================
   THE ICE CREAM CIRCLE: a parlour on a summer night   (body.parlor)
   strawberry, mint, vanilla and sky on warm plum; awning stripes, scallops, scoops, waffle
   ===================================================================== */
body.parlor.memory-page { --straw: #ff9ec4; --mint: #8fe3d0; --vanilla: #fff1c9; --sky: #9fd4ff; --choco: #4a2418; --mm-gold: var(--straw);
  --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23ff9ec4'/%3E%3Ccircle cx='36' cy='12' r='9' fill='%238fe3d0'/%3E%3Ccircle cx='24' cy='12' r='5' fill='%23fff1c9'/%3E%3C/svg%3E"); background: #24102a; }
body.parlor .ev-back i { filter: blur(12px) saturate(1.3) brightness(0.7) !important; opacity: 1 !important; }
body.parlor .ev-back::after { background: linear-gradient(180deg, rgba(58, 20, 60, 0.45), rgba(36, 16, 42, 0.6)) !important; mix-blend-mode: normal; }
body.parlor .ev-blob.b1 { background: radial-gradient(closest-side, rgba(255, 158, 196, 0.8), transparent) !important; }
body.parlor .ev-blob.b2 { background: radial-gradient(closest-side, rgba(143, 227, 208, 0.7), transparent) !important; }
body.parlor .ev-blob.b3 { background: radial-gradient(closest-side, rgba(159, 212, 255, 0.6), transparent) !important; }
/* the awning: stripes with a scalloped edge */
.mm-awning { position: absolute; z-index: 3; inset: 0 0 auto; height: clamp(96px, 9vw, 126px); pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--straw) 0 70px, var(--vanilla) 70px 140px);
  -webkit-mask: radial-gradient(35px 35px at 35px calc(100% - 35px), #000 98%, transparent) 0 0 / 70px 100%, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 35px) no-repeat;
  mask: radial-gradient(35px 35px at 35px calc(100% - 35px), #000 98%, transparent) 0 0 / 70px 100%, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 35px) no-repeat;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); transform-origin: 50% 0; animation: mm-awn 7s ease-in-out infinite alternate; }
@keyframes mm-awn { to { transform: scaleY(1.04); } }
body.parlor .mm-hero { min-height: min(108svh, 1000px); }
body.parlor .mm-hero-photo { inset: clamp(60px, 6vw, 84px) -2% 30%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
body.parlor .mm-hero::before { background: linear-gradient(180deg, rgba(36, 16, 42, 0.2), transparent 30%, transparent 48%, rgba(36, 16, 42, 0.8) 70%, rgba(36, 16, 42, 0.97) 90%); }
body.parlor .mm-hero::after { background: radial-gradient(40% 50% at 80% 30%, rgba(255, 158, 196, 0.5), transparent 70%), radial-gradient(36% 44% at 16% 36%, rgba(143, 227, 208, 0.45), transparent 70%); }
body.parlor .mm-title-noir { font-size: clamp(3rem, 8.4vw, 6.6rem); color: var(--vanilla); text-shadow: 0 5px 0 #e0608f, 0 10px 0 rgba(74, 36, 24, 0.55), 0 0 60px rgba(255, 158, 196, 0.7); }
body.parlor .mm-title-noir small { color: var(--mint); font-size: 0.4em; text-shadow: 0 3px 0 rgba(74, 36, 24, 0.6); }
body.parlor .mm-kicker { color: var(--vanilla); }
body.parlor .mm-hero-meta span + span::before { content: '🍦'; margin-inline: 10px; }
.mm-cone { position: absolute; z-index: 2; inset-inline-end: clamp(10px, 7vw, 120px); bottom: clamp(60px, 9vw, 130px); width: clamp(90px, 11vw, 160px); filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.6)); animation: mm-bob 5s ease-in-out infinite; }
/* chapters */
body.parlor .mm-chapter::before, body.parlor .mm-place::before, body.parlor .mm-reel::before, body.parlor .mm-wall-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none; background: radial-gradient(90% 85% at 50% 50%, rgba(36, 16, 42, 0.8), rgba(36, 16, 42, 0.5) 60%, rgba(36, 16, 42, 0.12)); }
body.parlor .mm-water { -webkit-text-stroke: 1.5px rgba(255, 158, 196, 0.45); }
body.parlor .mm-num { color: var(--vanilla); }
body.parlor .mm-num b { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50% 50% 46% 46%; font-family: var(--font-hand); font-weight: 800; font-size: 1.5rem; color: var(--choco); background: radial-gradient(circle at 35% 30%, #fff, var(--sc, var(--straw)) 55%); box-shadow: inset 0 -6px 0 rgba(74, 36, 24, 0.14), 0 10px 18px -8px #000; }
body.parlor .mm-num b::after { content: ''; position: absolute; top: 92%; left: 50%; width: 0; height: 0; translate: -50% 0; border: 13px solid transparent; border-top: 24px solid #e0a45c; border-bottom: 0; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4)); }
body.parlor .mm-num { margin-bottom: 18px; }
body.parlor .mm-chapter:nth-of-type(odd) { --sc: var(--mint); } body.parlor .mm-chapter.flip { --sc: var(--sky); }
body.parlor .mm-ph { border-radius: 8px; padding: 0; background: var(--vanilla); box-shadow: 0 0 0 6px var(--vanilla), 0 30px 46px -26px #000; clip-path: none; opacity: 0; translate: 0 40px; rotate: calc((var(--i) - 1.5) * 1.6deg); transition: opacity 0.8s calc(var(--i) * 0.1s), translate 0.9s var(--ease-spring) calc(var(--i) * 0.1s), rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); margin: 6px; }
body.parlor .mm-chapter.in .mm-ph { opacity: 1; translate: 0 0; clip-path: none; }
body.parlor .mm-ph.lead { rotate: -1deg; border-radius: 46% 46% 10px 10px / 22% 22% 10px 10px; box-shadow: 0 0 0 7px var(--vanilla), 0 0 0 10px var(--straw), 0 40px 60px -30px #000, 0 0 90px -30px rgba(255, 158, 196, 0.9); }
body.parlor .mm-ph:hover { rotate: 0deg; }
body.parlor .mm-ph img { transform: none !important; }
/* the place */
.mm-place, .mm-reel { padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.mm-place-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px clamp(26px, 4vw, 60px); align-items: center; }
.mm-sign { margin: 0; }
.mm-sign button { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; border-radius: 30px; aspect-ratio: 16 / 10; background: #000; box-shadow: 0 0 0 3px var(--vanilla), 0 0 0 9px var(--choco), 0 0 0 12px var(--straw), 0 40px 70px -34px #000, 0 0 120px -30px rgba(255, 200, 120, 0.8); }
.mm-sign img { width: 100%; height: 100%; object-fit: cover; }
.mm-place-logo img { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 10px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); animation: mm-bob 6s ease-in-out infinite; }
.mm-place-shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.parlor .mm-place-shots .mm-ph { opacity: 1; translate: 0 0; grid-column: auto; margin: 0; }
/* reel */
.mm-reel-track { list-style: none; margin: 0; padding: 30px 24px 40px; display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--straw) transparent; }
.mm-reel-track li { flex: none; width: clamp(240px, 30vw, 400px); scroll-snap-align: center; rotate: var(--r); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.mm-reel-track li:hover { rotate: 0deg; transform: translateY(-8px); }
.mm-reel-track button { display: block; width: 100%; padding: 8px 8px 34px; border: 0; border-radius: 6px; background: var(--vanilla); cursor: zoom-in; box-shadow: 0 30px 46px -26px #000; }
.mm-reel-track img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.mm-reel-hint { margin: 0; text-align: center; font-family: var(--font-hand); color: var(--vanilla); opacity: 0.8; }
body.parlor .mm-wall-sec .masonry .g-item { border-radius: 40px 12px 40px 12px; }
body.parlor .mm-end::before { background: linear-gradient(180deg, transparent, rgba(36, 16, 42, 0.7) 30%, rgba(24, 10, 28, 0.94)); }
body.parlor .mm-end h2 { color: var(--vanilla); text-shadow: 0 4px 0 #e0608f, 0 8px 24px #000; }
@media (max-width: 900px) { .mm-place-grid { grid-template-columns: 1fr; text-align: center; } .mm-place-text .btn-row { justify-content: center; } .mm-place-text .mm-prose p { margin-inline: auto; } .mm-place-shots { gap: 12px; } .mm-cone { width: 80px; bottom: 46%; inset-inline-end: 6px; } .mm-awning { height: 110px; } body.parlor .mm-ph { margin: 4px; box-shadow: 0 0 0 4px var(--vanilla), 0 20px 30px -20px #000; } body.parlor .mm-num::before, body.parlor .mm-num::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .mm-awning, .mm-cone, .mm-place-logo img { animation: none !important; } body.parlor .mm-ph { opacity: 1; translate: 0 0; transition: none; } }