/* EOTM Labs · Trustless museum display. Scene units are px inside .em-stage
   (about 1 unit = 1 mm on the wall); the stage is scaled to fit its container. */
.eotm-museum{
  --em-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --em-mono:ui-monospace,Menlo,Consolas,monospace;
  --em-ink:#000; --em-paper:#fff;
  --em-wall:#e7e1d6;
  position:relative; width:100%; height:100%; min-height:0; overflow:hidden;
  background:var(--em-wall); color:var(--em-ink);
  font:16px/1.5 var(--em-serif); -webkit-font-smoothing:antialiased;
  contain:layout paint; isolation:isolate; outline:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.eotm-museum *,.eotm-museum *::before,.eotm-museum *::after{box-sizing:border-box}
.eotm-museum:focus-visible{box-shadow:inset 0 0 0 2px var(--em-ink),inset 0 0 0 4px var(--em-paper)}
.eotm-museum.em-pseudo-fs{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:2147483000}
html.em-lock,html.em-lock body{overflow:hidden}
.eotm-museum:fullscreen{width:100%;height:100%}

.em-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

.em-viewport{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:default}
.eotm-museum.em-zoomed .em-viewport{touch-action:none;cursor:grab}
.eotm-museum.em-dragging .em-viewport{cursor:grabbing}
.em-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.em-stage.em-anim{transition:transform .38s cubic-bezier(.22,.7,.2,1)}
.em-track{position:absolute;left:0;top:0;height:100%;transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.2,1)}

/* ---- room ---- */
.em-wall{position:absolute;left:0;top:0;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.8) 0,rgba(255,255,255,.3) 8%,rgba(255,255,255,0) 24%),
    linear-gradient(to top,rgba(110,90,66,.09) 0,rgba(110,90,66,0) 20%),
    radial-gradient(ellipse 22% 30% at 12% 34%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(ellipse 18% 26% at 41% 71%,rgba(130,112,90,.035),transparent 70%),
    radial-gradient(ellipse 26% 22% at 66% 22%,rgba(255,255,255,.12),transparent 70%),
    radial-gradient(ellipse 20% 34% at 88% 62%,rgba(130,112,90,.03),transparent 70%),
    repeating-linear-gradient(83deg,rgba(120,104,86,.016) 0 1px,transparent 1px 5px,rgba(255,255,255,.03) 5px 6px,transparent 6px 13px),
    repeating-linear-gradient(-7deg,rgba(120,104,86,.012) 0 1px,transparent 1px 7px,rgba(255,255,255,.025) 7px 8px,transparent 8px 17px),
    var(--em-wall);
}
.em-skirt{position:absolute;left:0;height:22px;
  background:linear-gradient(to bottom,#fbfaf6 0,#f1ede5 55%,#e3ddd2 100%);
  box-shadow:0 -1px 0 rgba(90,75,60,.10),0 2px 3px rgba(60,45,30,.16)}
.em-floor{position:absolute;left:0;background-color:#dcc6a3}

/* ---- bay: one framed piece ---- */
.em-bay{position:absolute;top:0}
.em-spot{position:absolute;pointer-events:none;
  background:
    radial-gradient(ellipse 30% 13% at 50% 9%,rgba(255,252,244,.9),rgba(255,250,240,0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 46%,rgba(255,252,245,1) 0,rgba(255,250,240,.78) 30%,rgba(255,248,236,.32) 55%,rgba(255,246,232,.08) 68%,rgba(255,246,232,0) 76%)}
.em-glow{position:absolute;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(255,250,238,.55),rgba(255,250,238,0) 100%)}

.em-frame{position:absolute;width:860px;height:860px;padding:22px;
  background:linear-gradient(150deg,#2b2723 0,#161412 46%,#100f0d 70%,#24201c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.55),
    0 2px 2px rgba(20,14,8,.30),0 14px 22px -6px rgba(40,28,16,.30),0 46px 60px -22px rgba(40,28,16,.32)}
.em-mat{width:100%;height:100%;padding:128px;
  background:linear-gradient(to bottom,#fdfcf9 0,#f8f6f1 100%);
  box-shadow:inset 0 9px 12px -6px rgba(0,0,0,.22),inset 6px 0 9px -7px rgba(0,0,0,.12),inset -6px 0 9px -7px rgba(0,0,0,.10),inset 0 0 0 1px rgba(0,0,0,.25)}
.em-window{position:relative;width:560px;height:560px;background:#0b0b0d;
  box-shadow:0 0 0 1px #e9e5dc,0 0 0 5px #fffefb,0 0 0 6px rgba(0,0,0,.07),0 -2px 4px 5px rgba(0,0,0,.05)}
.em-art{display:block;width:560px;height:560px;-webkit-user-drag:none;pointer-events:none}
.em-glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.045) 47%,rgba(255,255,255,0) 58%)}

.em-label{position:absolute;width:300px;padding:24px 26px 20px;background:#fdfcf9;color:#111;
  box-shadow:0 1px 1px rgba(30,20,10,.16),0 8px 14px -8px rgba(30,20,10,.22)}
.em-l-title{margin:0 0 10px;font:400 25px/1.2 var(--em-serif);letter-spacing:-.005em}
.em-l-title i{font-style:italic}
.em-l-meta{margin:0;font:12px/1.55 var(--em-mono);letter-spacing:.12em;text-transform:uppercase;color:#333}
.em-l-line{margin:12px 0 16px;font:italic 17px/1.4 var(--em-serif);color:#1b1b1b}
.em-l-mark{display:flex;align-items:center;gap:8px;margin:0;padding-top:10px;border-top:1px solid rgba(0,0,0,.14);
  font:12px/1 var(--em-mono);letter-spacing:.2em;text-transform:uppercase;color:#444}
.em-l-mark::before{content:"";width:9px;height:9px;border:1.5px solid currentColor;transform:rotate(45deg)}

/* ---- controls ---- */
.em-ui{position:absolute;inset:0;pointer-events:none;font:12px/1 var(--em-mono)}
.em-ui button{pointer-events:auto}
.em-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;
  border:1px solid rgba(0,0,0,.16);border-radius:50%;background:rgba(255,255,255,.88);color:#111;cursor:pointer;
  font:inherit;box-shadow:0 1px 3px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s,opacity .15s}
.em-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.em-btn:hover{background:#fff}
.em-btn[aria-disabled="true"]{opacity:.4;cursor:default}
.eotm-museum button:focus{outline:none}
.eotm-museum button:focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 5px #fff}
.em-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.em-tools .em-btn{width:36px;height:36px}
.em-prev,.em-next{position:absolute;top:50%;margin-top:-20px}
.em-prev{left:8px}.em-next{right:8px}
.em-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;padding:2px 6px;
  border-radius:16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.em-dot{position:relative;width:24px;height:24px;margin:0;padding:0;border:0;background:none;cursor:pointer;color:#111}
.em-dot::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  border:1.25px solid currentColor;background:transparent;transition:transform .2s,background-color .2s}
.em-dot[aria-current="true"]::before{background:currentColor;transform:scale(1.25)}
.em-dot:hover::before{background:rgba(0,0,0,.35)}
.em-dot[aria-current="true"]:hover::before{background:currentColor}
.eotm-museum .em-dot:focus-visible{outline-offset:-2px;box-shadow:none;border-radius:50%}

/* phones: 44 px tap targets (house rule). Buttons grow to 44x44; the dots keep their small visual and pill,
   but each dot button is 44 px tall (negative margins keep the pill the same height) and as wide as eleven
   dots allow inside a phone-width museum. */
@media (max-width:767px){
  .em-btn,.em-tools .em-btn{width:44px;height:44px}
  .em-tools{top:8px;right:8px;gap:4px}
  .em-prev,.em-next{margin-top:-22px}
  .em-prev{left:6px}.em-next{right:6px}
  .em-dots{bottom:8px;padding:2px 4px}
  .em-dot{width:clamp(22px,calc((100vw - 56px) / 11),28px);height:44px;margin:-10px 0}
}

@media (prefers-reduced-motion:reduce){
  .em-stage.em-anim,.em-track,.em-btn,.em-dot::before{transition:none !important}
}
@media (forced-colors:active){
  .em-btn,.em-dots{border:1px solid ButtonText}
  .em-dot::before{border-color:ButtonText}
  .em-dot[aria-current="true"]::before{background:Highlight}
}