/* DISKO Motion aisle (motion/index.php, motion/item.php). Loaded only by those
   two pages, after site.css. It builds on site.css (the fonts and colors in
   :root, .crt, .vhs-intro, .kicker, .smpte, .slate, .btn, .chip, .back) and
   restyles none of it: every rule here is under a .mo- class.

   The disk: a 3.5-inch floppy drawn in CSS, its shell in the product color
   (--c, shadow side --cd, markings in --ink-c), a chamfered top-right corner,
   a sliding metal shutter, a write-protect tab, a cream label. It stands in a
   rental clamshell; on hover or keyboard focus it lifts out and the shutter
   slides open. Under prefers-reduced-motion nothing moves. */

.mo-aisle { max-width: 1120px; }
.mo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mo-fine { color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ---- intro --------------------------------------------------------------- */
.mo-intro-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 12px 0 0;
  font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mo-intro-meta b { color: #f4eedd; font-weight: 700; }
.mo-smpte { border-radius: 6px; margin: 26px 0 0; opacity: .85; }

/* ---- the shelf ----------------------------------------------------------- */
/* No column gap: each slot's plank meets the next one, so a row reads as one shelf. */
.mo-shelf { list-style: none; margin: 40px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 0; row-gap: 56px; }
.mo-slot { position: relative; display: flex; flex-direction: column; min-width: 0; }

/* the clamshell */
.mo-case { position: relative; margin: 0 18px; padding: 16% 8% 5%; isolation: isolate; container-type: inline-size; }
.mo-case-back { position: absolute; left: 0; right: 0; top: 7%; bottom: 0; z-index: -1; border-radius: 12px 12px 6px 6px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 36%, rgba(0,0,0,.35) 100%), #121218;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 22px 30px -22px rgba(255,255,255,.12), 0 20px 30px -18px rgba(0,0,0,.95); }
.mo-case-back::before { /* the hinge along the spine */
  content: ''; position: absolute; top: 6%; bottom: 6%; left: 5px; width: 4.5%; border-radius: 4px; opacity: .55;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 17%, rgba(0,0,0,.35) 17% 23%); }
.mo-case-back::after { /* the product color, lit when the disk comes out */
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(90% 75% at 50% 100%, color-mix(in srgb, var(--c) 40%, transparent), transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.mo-host:hover .mo-case-back::after, .mo-host:focus-within .mo-case-back::after { opacity: 1; }
.mo-case-lip { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 2; border-radius: 0 0 6px 6px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5cqw 0 6cqw;
  background: linear-gradient(180deg, rgba(46,46,58,.55), rgba(12,12,16,.86));
  border-top: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.mo-genre { font-family: var(--label); font-weight: 700; font-size: max(9px, 3.8cqw); letter-spacing: .14em; line-height: 1;
  padding: .55em .8em; border-radius: 3px; background: var(--btn); color: var(--btn-ink); transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.mo-price { display: flex; align-items: center; justify-content: center; width: max(36px, 15cqw); aspect-ratio: 1; border-radius: 50%;
  margin-top: -6cqw; background: radial-gradient(circle at 35% 30%, #fb7185, #e11d48 60%, #be123c); color: #fff;
  font-family: var(--label); font-weight: 700; font-size: max(9px, 3.9cqw); letter-spacing: .02em; transform: rotate(9deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* the disk */
.mo-disk { position: relative; width: 100%; aspect-ratio: 90 / 94; container-type: inline-size;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.6));
  transition: transform .38s cubic-bezier(.2,.7,.2,1), filter .38s; }
.mo-host:hover .mo-disk, .mo-host:focus-within .mo-disk { transform: translateY(-16%) rotate(-1.5deg);
  filter: drop-shadow(0 24px 22px rgba(0,0,0,.7)); }
.mo-shell { position: absolute; inset: 0;
  clip-path: polygon(2.5% 0, 90.5% 0, 100% 9%, 100% 97.5%, 97.5% 100%, 2.5% 100%, 0 97.5%, 0 2.5%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 20%, var(--c) 60%, var(--cd) 100%);
  box-shadow: inset 0 0 0 .7cqw rgba(255,255,255,.07), inset 0 -2cqw 4cqw rgba(0,0,0,.18); }
.mo-arrow { position: absolute; left: 6%; top: 6%; width: 6%; height: 5%; background: var(--ink-c); opacity: .5;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mo-track { position: absolute; top: 0; left: 21%; width: 58%; height: 38%; overflow: hidden; border-radius: 0 0 1.4cqw 1.4cqw;
  background: color-mix(in srgb, var(--cd) 78%, #000); box-shadow: inset 0 .8cqw 1.6cqw rgba(0,0,0,.5); }
.mo-media { position: absolute; top: 16%; bottom: 12%; left: 56%; width: 17%; border-radius: .8cqw;
  background: radial-gradient(130% 90% at 30% 18%, #7a5534, #3f2814 58%, #24160b);
  box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.45); }
.mo-shutter { position: absolute; top: 0; bottom: 5%; left: 4%; width: 78%; border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(90deg, #858b93 0%, #d9dde3 20%, #f5f7f9 36%, #c2c8cf 58%, #9aa0a8 100%);
  box-shadow: inset 0 -.5cqw 0 rgba(0,0,0,.18), .8cqw 0 1.4cqw rgba(0,0,0,.35);
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mo-shutter::before { /* the window in the plate */
  content: ''; position: absolute; top: 16%; bottom: 14%; left: 64%; width: 21%; border-radius: .7cqw;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12)); box-shadow: inset 0 .3cqw .6cqw rgba(0,0,0,.4); }
.mo-shutter::after { /* pressed grooves */
  content: ''; position: absolute; left: 10%; top: 30%; width: 34%; height: 34%; opacity: .45;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 4px); }
.mo-host:hover .mo-shutter, .mo-host:focus-within .mo-shutter { transform: translateX(-46%); }
.mo-wp { position: absolute; left: 5%; bottom: 3.2%; width: 8%; height: 7%; overflow: hidden; border-radius: .6cqw;
  background: #0b0b0e; box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.6); }
.mo-wp::before { /* the write-protect slider */
  content: ''; position: absolute; left: 12%; right: 12%; top: 10%; height: 46%; border-radius: .4cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cd) 65%, #000), var(--cd)); }
.mo-hd { position: absolute; right: 5%; bottom: 3.2%; width: 7%; height: 7%; border-radius: .6cqw; background: #0b0b0e; }
.mo-emboss { position: absolute; left: 16%; right: 16%; bottom: 4%; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: var(--label); font-size: max(7px, 3.1cqw); letter-spacing: .22em; line-height: 1; color: var(--ink-c); opacity: .55; }

/* the label */
.mo-label { position: absolute; left: 7.5%; right: 7.5%; top: 43%; bottom: 12.5%; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 1.2cqw 1.2cqw .6cqw .6cqw;
  background: linear-gradient(180deg, #f4eedd, #e6dcc3); color: #1a1813;
  box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.55), 0 .4cqw 1cqw rgba(0,0,0,.25); }
.mo-label::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 5.6cqw, rgba(0,0,0,.07) 5.6cqw calc(5.6cqw + 1px)); }
.mo-stripe { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  padding: 1.1cqw 3cqw; background: linear-gradient(90deg, var(--c), var(--cd)); color: var(--ink-c);
  font-family: var(--label); font-weight: 700; font-size: max(8px, 3.8cqw); letter-spacing: .12em; line-height: 1.2; }
.mo-stripe span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; text-transform: uppercase; }
.mo-label-name { position: relative; z-index: 1; margin: 0; padding: 2cqw 3.5cqw .4cqw;
  font-family: var(--marker); font-weight: 400; font-size: max(15px, 10.5cqw); line-height: 1; letter-spacing: 0;
  color: color-mix(in srgb, var(--cd) 60%, #0d0b08); transform: rotate(-1.4deg); transform-origin: left center; }
.mo-label-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; gap: 3cqw;
  padding: .4cqw 3.5cqw 2cqw; }
.mo-art { flex: none; width: 17cqw; height: 17cqw; color: var(--cd); }
.mo-art svg, .mo-art .mo-poster { display: block; width: 100%; height: 100%; }
.mo-art .mo-poster { object-fit: cover; border-radius: 1cqw; }
.mo-art .f { fill: var(--c); }
.mo-pitch { margin: 0; font-family: var(--hand); font-size: max(10.5px, 5.1cqw); line-height: 1.18; color: #2b2820; }
/* an optional preview loop plays over the whole label while the slot is hovered */
.mo-prev { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .25s; pointer-events: none; background: #0b0b0e; }
.mo-playing .mo-prev { opacity: 1; }

/* the shelf plank and the shelf talker under it */
.mo-plank { position: relative; height: 16px; margin-top: -1px;
  background: linear-gradient(180deg, #4b4b57 0, #2b2b34 30%, #17171d 72%, #0b0b0e 100%);
  box-shadow: 0 14px 22px -10px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.2); }
.mo-plank::after { /* the price rail */
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 5px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.25)); }
.mo-talker { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 0 18px; padding: 14px 14px 16px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.mo-meta { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.mo-meta i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.mo-tagline { margin: 0; color: #cfd4de; font-size: 13.5px; line-height: 1.5; }
.mo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
/* "Box back" covers the whole slot, so the disk itself opens the box back; "Rent it" sits above it. */
.mo-boxlink::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }

/* the buy buttons: the shell color with its own ink (see dl_motion_style) */
.mo-rent { position: relative; z-index: 2; background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.mo-rent:hover { filter: brightness(1.12); text-decoration: none; }
.mo-rent--set { --btn: #e11d48; --btn-ink: #ffffff; background-image: linear-gradient(90deg, #e11d48, #be123c); }

/* ---- the box set --------------------------------------------------------- */
.mo-boxset { margin: 72px 0 0; padding: 26px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px 34px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(132,82,242,.20), transparent 60%),
              radial-gradient(120% 140% at 100% 100%, rgba(242,113,28,.14), transparent 60%), rgba(255,255,255,.02); }
.mo-boxset h2 { margin: 6px 0 4px; font-family: var(--display); font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -.5px; }
.mo-boxset p { margin: 8px 0; color: #cfd4de; font-size: 14.5px; }
.mo-boxset .mo-kicker { color: #fb7185; }
.mo-boxset .mo-fine { color: var(--muted); font-size: 13px; }
.mo-boxset .mo-rent { margin-top: 10px; }
.mo-boxset-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.mo-boxset-price .mo-now { font-family: var(--display); font-weight: 800; font-size: 30px; color: #fff; }
.mo-boxset-price .mo-was { font-family: var(--label); font-size: 14px; color: var(--muted); }
.mo-fan { position: relative; width: 100%; max-width: 320px; height: 184px; margin: 0 auto; }
.mo-mini { position: absolute; left: 50%; bottom: 26px; width: 108px; height: 112px; margin-left: -54px;
  transform-origin: 50% 250%; transform: rotate(calc((var(--i) - 3.5) * 5.5deg));
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  clip-path: polygon(3% 0, 89% 0, 100% 11%, 100% 97%, 97% 100%, 3% 100%, 0 97%, 0 3%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 28%, var(--cd)); }
.mo-mini::before { content: ''; position: absolute; top: 0; left: 23%; width: 52%; height: 36%; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #8b9199, #eef1f4 40%, #a9afb7); }
.mo-mini::after { content: ''; position: absolute; left: 9%; right: 9%; top: 44%; bottom: 11%; border-radius: 3px;
  background: linear-gradient(180deg, var(--cd) 0 20%, #f4eedd 20%); }
.mo-boxset:hover .mo-mini { transform: rotate(calc((var(--i) - 3.5) * 6.5deg)) translateY(-8px); }
.mo-fan-box { position: absolute; left: 4%; right: 4%; bottom: 0; height: 46px; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #262630, #0e0e12); box-shadow: 0 18px 30px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.mo-fan-box span { font-family: var(--label); font-size: 12px; letter-spacing: .22em; color: #f4eedd; }

/* ---- trial, hosts, questions -------------------------------------------- */
.mo-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 30px; }
.mo-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.mo-card h2 { margin: 6px 0 8px; font-size: 21px; }
.mo-card p { margin: 8px 0; color: #cfd4de; font-size: 14.5px; }
.mo-card .mo-fine { color: var(--muted); font-size: 13px; }
.mo-chips { margin: 12px 0 6px; }
.mo-faq { max-width: 780px; margin-top: 48px; }
.mo-faq h2 { margin: 0 0 12px; }
.mo-faq details { border-top: 1px solid var(--line); }
.mo-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.mo-faq summary { position: relative; cursor: pointer; list-style: none; padding: 14px 4px 14px 28px; font-weight: 700; font-size: 15px; }
.mo-faq summary::-webkit-details-marker { display: none; }
.mo-faq summary::before { content: '\25B6'; position: absolute; left: 4px; top: 17px; font-size: 10px; color: #f43f5e; }
.mo-faq details[open] summary::before { transform: rotate(90deg); }
.mo-faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.mo-faq details p { margin: 0 0 16px 28px; color: #cfd4de; font-size: 14.5px; }
.mo-close { margin: 44px 0 0; text-align: center; }
.mo-close p { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; }
.mo-close .mo-fine { margin-top: 14px; }

/* ---- the box back (motion/item.php) ------------------------------------- */
.mo-item { max-width: 1040px; --app: color-mix(in srgb, var(--c) 66%, #fff); }
.mo-bb-pitch { margin: 2px 0 10px; font-family: var(--marker); font-size: clamp(19px, 2.6vw, 25px); line-height: 1.25;
  color: color-mix(in srgb, var(--c) 58%, #fff); }
.mo-bb { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; align-items: start; }
.mo-bb-side { position: sticky; top: 78px; }
.mo-case--big { margin: 0; padding: 14% 7% 5%; }
.mo-buy { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mo-buy .btn { text-align: center; }
.mo-bb-side .mo-fine { margin: 12px 0 0; }
.mo-blurb { margin: 0 0 6px; color: #d6dae2; font-size: 16.5px; line-height: 1.65; }
.mo-side { margin-top: 22px; padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.mo-side h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: 17px; }
.mo-side h2 span { padding: 3px 9px; border-radius: 999px; background: var(--btn); color: var(--btn-ink);
  font-family: var(--label); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.mo-tracks { list-style: none; margin: 0; padding: 0; counter-reset: mo-trk; }
.mo-tracks li { counter-increment: mo-trk; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 8px 0;
  border-top: 1px dashed rgba(255,255,255,.09); color: #d6dae2; font-size: 14.5px; line-height: 1.5; break-inside: avoid; }
.mo-tracks li:first-child { border-top: 0; }
.mo-tracks li::before { padding-top: 2px; font-family: var(--label); font-size: 12px; color: var(--muted); }
.mo-tracks--a li::before { content: 'A' counter(mo-trk); }
.mo-tracks--b li::before { content: 'B' counter(mo-trk); }
.mo-modes { display: grid; gap: 12px; }
.mo-mode { padding: 10px 14px; border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.03); }
.mo-mode h3 { margin: 0 0 4px; font-size: 15px; }
.mo-mode p { margin: 0; color: #cfd4de; font-size: 14px; line-height: 1.55; }
.mo-specs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 28px; align-items: end; margin-top: 36px; padding: 20px 22px;
  border-radius: 12px; background: linear-gradient(180deg, #f4eedd, #e6dcc3); color: #1a1813; box-shadow: 0 16px 34px -18px rgba(0,0,0,.85); }
.mo-specs h2 { margin: 0 0 10px; font-family: var(--label); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #5b5647; }
.mo-specs dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 14px; line-height: 1.5; }
.mo-specs dt { padding-top: 2px; font-family: var(--label); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #6b6553; }
.mo-specs dd { margin: 0; }
.mo-specs a { color: #0f766e; text-decoration: underline; }
.mo-barcode-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mo-barcode { display: block; width: 132px; height: 62px;
  background: repeating-linear-gradient(90deg, #1a1813 0 2px, transparent 2px 4px, #1a1813 4px 5px, transparent 5px 7px,
    #1a1813 7px 10px, transparent 10px 12px, #1a1813 12px 13px, transparent 13px 16px); }
.mo-barcode-n { font-family: var(--label); font-size: 11px; letter-spacing: .14em; color: #3b3930; }
.mo-trial { margin: 22px 0 0; color: #cfd4de; font-size: 14.5px; }
.mo-trial b { color: var(--ink); }
.mo-trial-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mo-more { margin-top: 40px; }
.mo-more h2 { margin: 0 0 12px; font-size: 20px; }
.mo-more ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mo-more a { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.mo-more a:hover { border-color: var(--c); text-decoration: none; }
.mo-more a span { font-family: var(--label); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mo-more i { flex: none; width: 14px; height: 14.6px; background: linear-gradient(165deg, var(--c), var(--cd));
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%); }

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 860px) {
  .mo-bb { grid-template-columns: minmax(0, 1fr); }
  .mo-bb-side { position: static; width: 100%; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .mo-boxset { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
}
@media (max-width: 600px) {
  .mo-specs { grid-template-columns: minmax(0, 1fr); }
  .mo-specs dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mo-specs dd { margin-bottom: 8px; }
  .mo-barcode-wrap { align-items: flex-start; }
}
@media (min-width: 620px) {
  .mo-tracks--cols { columns: 2; column-gap: 26px; }
}
@media (max-width: 420px) {
  .mo-talker { margin-left: 10px; margin-right: 10px; }
  .mo-shelf .mo-case { width: min(100% - 20px, 270px); align-self: center; margin: 0; }
}

/* ---- reduced motion: nothing lifts, slides, spreads or plays ------------ */
@media (prefers-reduced-motion: reduce) {
  .mo-disk, .mo-shutter, .mo-mini, .mo-case-back::after, .mo-prev { transition: none !important; }
  .mo-host:hover .mo-disk, .mo-host:focus-within .mo-disk,
  .mo-host:hover .mo-shutter, .mo-host:focus-within .mo-shutter { transform: none !important; }
  .mo-host:hover .mo-disk, .mo-host:focus-within .mo-disk { filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); }
  .mo-boxset:hover .mo-mini { transform: rotate(calc((var(--i) - 3.5) * 5.5deg)) !important; }
  .mo-prev { display: none !important; }
}