/* V3 home section 3, "What we build for galleries": the cut-away room (desktop) and five cards (phone).
   Self-contained: every token is var(--x, fallback). No JS: hover and focus use :has(). Idle: nothing moves. */

.mp{max-width:calc(var(--v3-max,1360px) + 2 * var(--v3-pad-x,clamp(20px,5vw,64px)));margin:0 auto;padding:0 max(var(--v3-pad-x,clamp(20px,5vw,64px)),env(safe-area-inset-right,0px)) clamp(64px,8vw,128px) max(var(--v3-pad-x,clamp(20px,5vw,64px)),env(safe-area-inset-left,0px));color:var(--v3-ink,#e1e5e5);scroll-margin-top:calc(var(--head-h,72px) + 8px);content-visibility:auto;contain-intrinsic-size:auto 950px}
@media (max-width:559px){.mp{contain-intrinsic-size:auto 1650px}}
.mp-head{max-width:640px}
.mp-intro{margin:0;font:400 var(--v3-t-lede,clamp(1.0625rem,.35vw + 1rem,1.3125rem))/1.5 var(--v3-font-text,ui-sans-serif,sans-serif);color:var(--v3-ink-2,#c8c6c0);max-width:52ch;text-wrap:pretty}
.mp-all{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--v3-ink,#ecebe7);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--v3-line-strong,#454542);transition:text-decoration-color var(--v3-dur-1,160ms)}
.mp-all::after{content:"\2192";text-decoration:none}
.mp-all:hover{text-decoration-color:var(--v3-red-ink,#ff8a78)}

/* ---------- room (769 px and up) ---------- */
[data-theme=light] .mp{--mp-sh:.1}
.mp-room{position:relative;width:100%;max-width:1240px;margin:clamp(24px,4vw,56px) auto 0;container-type:inline-size}
.mp-room svg{display:block}
.mp-shell,.mp-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-leaders{pointer-events:none;z-index:3}
.mp-wall-r{fill:var(--v3-surface,#111)}
.mp-wall-l{fill:var(--v3-ground-2,#141414)}
.mp-floor{fill:var(--surface-2,#191919)}
.mp-grid line{stroke:var(--v3-line,#2b2b2b);stroke-width:1}
.mp-skirt{fill:var(--v3-red,#e2422e)}
.mp-track{fill:var(--v3-line-strong,#454545)}
.mp-shell polygon:not(.mp-skirt):not(.mp-track){stroke:var(--v3-line-strong,#454545);stroke-width:1.5;stroke-linejoin:round}

.mp-obj{position:absolute;display:block;pointer-events:none;transition:transform var(--v3-dur-2,320ms) var(--v3-ease,cubic-bezier(.22,1,.36,1)),filter var(--v3-dur-2,320ms) var(--v3-ease,cubic-bezier(.22,1,.36,1))}
.mp-obj svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-obj polygon,.mp-obj img,.mp-phone{pointer-events:auto}
.mp-obj img{position:absolute;display:block;object-fit:cover;transform-origin:0 0;background:#000}
.mp-sh{fill:#000;opacity:var(--mp-sh,.35);pointer-events:none!important}
.mp-f1{fill:var(--grey-2,#212121)}
.mp-f2{fill:var(--grey-3,#333)}
.mp-f3{fill:var(--v3-ground-2,#141414)}
.mp-bezel{fill:#0d0d0d;stroke:#3a3a3a;stroke-width:1}
.mp-frame{fill:#1b1b1b;stroke:#2c2c2c;stroke-width:1}
.mp-pool{fill:#fff1dc;opacity:.05;pointer-events:none!important}
.mp-plaque{fill:#f1ede4}
.mp-plinth-t{fill:#e8e3d8}
.mp-plinth-x{fill:#a9a498}
.mp-plinth-y{fill:#cbc6ba}
.mp-glass line{stroke:#cfe3e8;stroke-opacity:.38;stroke-width:1.2}
.mp-desk-t{fill:#2a2420;stroke:#3a322c;stroke-width:1}
.mp-desk-x{fill:#15110f}
.mp-desk-y{fill:#1e1916}
.mp-case{fill:#0a0a0a}
.mp-o-replica img{background:none}
.mp-o-site{transform:rotate(-8deg)}
.mp-phone{position:absolute;inset:0;padding:4.5%;border-radius:16% / 8%;background:#151515;border:1px solid #3a3a3a;box-shadow:-14px 20px 34px rgba(0,0,0,.55)}
.mp-phone img{position:relative;width:100%;height:100%;border-radius:12% / 6%}

/* museum-label chips: anchor point is the chip's left edge, vertical middle */
.mp-chip{position:absolute;z-index:4;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:48px;padding:8px 14px 8px 28px;background:#f1ede4;color:#1d1c18;border:1px solid var(--v3-line-strong,#454545);text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.28);transition:background var(--v3-dur-1,160ms),opacity var(--v3-dur-2,320ms)}
.mp-chip::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:#a92f21}
.mp-chip b{font:600 clamp(.8125rem,1.25cqw,.9375rem)/1.1 var(--v3-font-text,"Instrument Sans",ui-sans-serif,sans-serif)}
.mp-chip span{font:500 .75rem/1.1 var(--v3-font-mono,"IBM Plex Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#4b483f}
.mp-chip[data-side=r]{transform:translate(-100%,-50%)}
.mp-leaders path{stroke:var(--v3-red,#e2422e);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.mp-leaders circle{fill:var(--v3-red,#e2422e)}

/* focus state (the v3 map lift, DESIGN-V3 7.3): the chosen object lifts 4 px, the rest dim */
.mp-room:has(.mp-chip:hover,.mp-chip:focus-visible,.mp-obj:hover) .mp-obj{filter:brightness(.5) saturate(.7)}
.mp-room:has(.mp-chip:hover,.mp-chip:focus-visible,.mp-obj:hover) .mp-chip{opacity:.62}
.mp-room:has(.mp-chip:hover,.mp-chip:focus-visible,.mp-obj:hover) .mp-leaders g{opacity:.35}
.mp-room:has([data-k=kiosk]:is(:hover,:focus-visible)) [data-k=kiosk],
.mp-room:has([data-k=busts]:is(:hover,:focus-visible)) [data-k=busts],
.mp-room:has([data-k=replica]:is(:hover,:focus-visible)) [data-k=replica],
.mp-room:has([data-k=archive]:is(:hover,:focus-visible)) [data-k=archive],
.mp-room:has([data-k=site]:is(:hover,:focus-visible)) [data-k=site]{filter:none;opacity:1}
.mp-room:has([data-k=kiosk]:is(:hover,:focus-visible)) .mp-obj[data-k=kiosk],
.mp-room:has([data-k=busts]:is(:hover,:focus-visible)) .mp-obj[data-k=busts],
.mp-room:has([data-k=replica]:is(:hover,:focus-visible)) .mp-obj[data-k=replica],
.mp-room:has([data-k=archive]:is(:hover,:focus-visible)) .mp-obj[data-k=archive]{transform:translateY(-4px)}
.mp-room:has([data-k=site]:is(:hover,:focus-visible)) .mp-obj[data-k=site]{transform:translateY(-4px) rotate(-8deg)}
.mp-room:has(:is(.mp-chip,.mp-obj):hover) .mp-chip:hover,.mp-chip:focus-visible{background:#fff}

/* ---------- phone: five labelled cards ---------- */
.mp-list{display:none;list-style:none;margin:28px 0 0;padding:0;gap:14px}
.mp-list a{display:block;text-decoration:none;color:inherit;background:var(--v3-surface,#111);border:1px solid var(--v3-line,#2b2b2b)}
.mp-list img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.mp-lab{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:60px;padding:10px 16px 10px 32px;position:relative;background:#f1ede4;color:#1d1c18}
.mp-lab::before{content:"";position:absolute;left:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:#a92f21}
.mp-lab b{font:600 1rem/1.15 var(--v3-font-text,"Instrument Sans",ui-sans-serif,sans-serif)}
.mp-lab span{font:500 .75rem/1.1 var(--v3-font-mono,"IBM Plex Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#4b483f}
.mp-list a:hover .mp-lab{background:#fff}

@media (max-width:768px){
  .mp-room{display:none}
  .mp-list{display:grid}
}
@media (min-width:560px) and (max-width:768px){.mp-list{grid-template-columns:1fr 1fr}.mp-list li:last-child{grid-column:1 / -1}.mp-list li:last-child img{aspect-ratio:32/9;object-position:50% 0}}

/* reduced motion: dim only, nothing travels */
@media (prefers-reduced-motion:reduce){
  .mp-obj,.mp-chip{transition:none}
  .mp-room .mp-obj[data-k]{transform:none!important}
  .mp-room .mp-o-site{transform:rotate(-8deg)!important}
}
html:is(.reduced-motion,.is-lite,.rb-lite-boot) .mp-room .mp-obj[data-k]{transform:none!important}
html:is(.reduced-motion,.is-lite,.rb-lite-boot) .mp-room .mp-o-site{transform:rotate(-8deg)!important}