/* ============================================================
   PIECES / VIRTUAL MUSEUM — infinite pan + zoom canvas
   Placeholder stage: grey rectangles on a white plane.
   ============================================================ */

body.museum-body{
  overflow:hidden;
  background:#fafafa;
  height:100vh;
}

/* ── VIEWPORT ── (full height; the auto-hiding nav floats over the top) */
.museum{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  background:#fafafa;
  cursor:grab;
  touch-action:none;            /* we handle pan/zoom ourselves */
  user-select:none;
  -webkit-user-select:none;
}

/* ── TOP-RIGHT TOOLS: Leave a mark + Filter, stacked under Contact ── */
.museum-tools{
  position:fixed;
  top:calc(var(--nav-h, 56px) + 10px);
  right:var(--pad-x, 48px);
  z-index:116;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  /* the whole tools zone uses Helvetica */
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── LEAVE A MARK (guestbook) ── */
.leave-mark{
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.08);
  color:#111;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px;
  padding:12px 24px; border-radius:100px;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  white-space:nowrap;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.leave-mark:hover{ background:#fff; transform:translateY(-1px); }

.mark-composer{
  position:fixed;
  top:calc(var(--nav-h, 56px) + 52px);
  right:var(--pad-x, 48px);
  transform:translateY(-8px);
  z-index:130;
  width:min(320px, 90vw);
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,0.18);
  padding:16px;
  opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mark-composer.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mc-head{ font-size:15px; font-weight:500; color:#111; margin-bottom:12px; }
.mc-label{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#999; margin:12px 0 7px; }
.mc-shapes, .mc-colors{ display:flex; flex-wrap:wrap; gap:8px; }
.mc-shape{
  width:38px; height:38px; border-radius:10px;
  border:1.5px solid rgba(0,0,0,0.1); background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.mc-shape svg{ width:20px; height:20px; fill:#333; }
.mc-shape.on{ border-color:#111; transform:scale(1.05); }
.mc-color{
  width:26px; height:26px; border-radius:50%;
  cursor:pointer; border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
  transition:transform .15s ease;
}
.mc-color.on{ border-color:#111; transform:scale(1.12); }
.mark-composer input[type=text]{
  width:100%; box-sizing:border-box;
  border:1px solid rgba(0,0,0,0.14); border-radius:9px;
  padding:9px 11px; font-size:14px; font-family:var(--font);
  color:#111; outline:none; background:#fff;
}
.mark-composer input[type=text]:focus{ border-color:#111; }
.mc-actions{ display:flex; gap:8px; margin-top:14px; }
.mc-cancel, .mc-place{
  flex:1; border:none; border-radius:9px; padding:10px;
  font-size:13px; font-family:var(--font); cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.mc-cancel{ background:rgba(0,0,0,0.06); color:#333; flex:0 0 auto; padding:10px 14px; }
.mc-place{ background:#111; color:#fff; }
.mc-place:disabled{ opacity:.4; cursor:not-allowed; }
.mc-log{ font-size:12px; color:#888; margin-top:8px; min-height:1em; }
.mc-log.err{ color:#c0392b; }
.mc-log.ok{ color:#1f9d55; }

.mark-placing{
  position:fixed; top:14px; left:50%;
  transform:translateX(-50%);
  z-index:130;
  background:#111; color:#fff;
  font-family:var(--font); font-size:13px;
  padding:9px 16px; border-radius:100px;
  box-shadow:0 8px 30px rgba(0,0,0,0.2);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.mark-placing.is-open{ opacity:1; visibility:visible; }

.mark-toast{
  position:fixed; bottom:88px; left:50%;
  transform:translateX(-50%) translateY(8px);
  z-index:130;
  background:#111; color:#fff;
  font-family:var(--font); font-size:13px;
  padding:11px 18px; border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.24);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  max-width:88vw; text-align:center;
}
.mark-toast.is-open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ── STICKERS on the canvas (approved guest marks) ── */
.sticker{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:max-content; max-width:170px;
  pointer-events:none;   /* they decorate; not draggable/openable */
  text-align:center;
}
.sticker svg{ width:40px; height:40px; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18)); }
.sticker .st-txt{
  background:rgba(255,255,255,0.96);
  color:#141414;
  font-family:var(--font); font-size:12px; line-height:1.3;
  padding:5px 9px; border-radius:9px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  word-break:break-word;
}

/* ── CUSTOM CURSOR on the canvas (the site's "+" gets interactive states) ── */
.museum-body .cursor-x{
  width:22px; height:22px;
  transition:width .18s var(--ease), height .18s var(--ease),
             box-shadow .18s var(--ease), transform .16s var(--ease), opacity .12s;
}
.museum-body .cursor-x::before{ width:22px; }
.museum-body .cursor-x::after{ height:22px; }
/* over a piece → morph the "+" into a small ring-with-plus (invites a click) */
.museum-body .cursor-x.over-piece{
  width:42px; height:42px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1.6px #fff;
}
.museum-body .cursor-x.over-piece::before{
  width:11px; left:50%; top:50%; transform:translate(-50%,-50%);
}
.museum-body .cursor-x.over-piece::after{
  height:11px; left:50%; top:50%; transform:translate(-50%,-50%);
}
/* while dragging → tuck the plus into a small tilted mark */
.museum-body .cursor-x.dragging{
  transform:translate(-50%,-50%) rotate(45deg) scale(0.72);
}

/* ── FILTER — pill in the top-right stack + downward vertical menu ── */
.museum-filter{
  position:relative;
}
.filter-btn{
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.08);
  color:#111;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px;
  padding:12px 26px; border-radius:100px;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.filter-btn:hover{ background:#fff; transform:translateY(-1px); }
.museum-filter.open .filter-btn{ background:#111; color:#fff; border-color:#111; }

.filter-menu{
  position:absolute;
  right:0; top:calc(100% + 10px);
  display:flex; flex-direction:column; gap:6px;
  padding:8px;
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:24px;
  box-shadow:0 10px 34px rgba(0,0,0,0.10);
  min-width:168px;
  max-height:66vh; overflow-y:auto; scrollbar-width:none;
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transform-origin:top right;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.filter-menu::-webkit-scrollbar{ display:none; }
.museum-filter.open .filter-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.mf-chip{
  text-align:left;
  padding:11px 18px;
  border:none; border-radius:100px;
  background:transparent; color:#444;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.mf-chip:hover{ background:rgba(0,0,0,0.05); color:#111; }
.mf-chip.is-active{ background:#111; color:#fff; }

/* clustering / regrouping animation — only while filtering, so drags stay snappy */
.museum-world.pieces-animating .piece{
  transition:left .7s cubic-bezier(0.22,1,0.36,1),
             top .7s cubic-bezier(0.22,1,0.36,1),
             width .7s cubic-bezier(0.22,1,0.36,1),
             height .7s cubic-bezier(0.22,1,0.36,1),
             transform .5s cubic-bezier(0.22,1,0.36,1),
             opacity .45s ease;
}
/* highlighted cluster (selected collection) pops slightly; others stay fully visible */
.piece.mf-focus{
  transform:scale(1.05);
  z-index:40;
  box-shadow:0 22px 60px rgba(0,0,0,0.22);
}

/* ── MINIMAL AUTO-HIDING NAV ── */
.museum-nav{ background:transparent; pointer-events:none; }
.museum-nav .nav-logo,
.museum-nav .museum-contact{ pointer-events:auto; }
.museum-nav .nav-logo img{
  width:28px; height:28px;      /* circular badge logo, already dark on the light canvas */
}
.museum-contact{
  margin-left:auto;             /* push to the right edge */
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.08);
  color:#111;
  font-family:var(--font); font-size:14px;
  padding:8px 18px; border-radius:100px;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.museum-contact:hover{ background:#fff; transform:translateY(-1px); }

/* socials inside the overlay (this page has no footer) */
.overlay-socials{ display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; }
.overlay-socials a{
  font-size:14px; color:rgba(255,255,255,0.55);
  text-decoration:none; transition:color .18s ease;
}
.overlay-socials a:hover{ color:#fff; }
.museum.is-panning{cursor:grabbing;}

/* ── WORLD (the thing we translate + scale) ── */
.museum-world{
  position:absolute;
  top:0; left:0;
  width:0; height:0;
  transform-origin:0 0;
  will-change:transform;
}

/* ── A PIECE ── */
.piece{
  position:absolute;
  background:#dadada;
  border-radius:3px;
  cursor:pointer;
  overflow:hidden;
  transition:box-shadow .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.piece:hover{
  background:#cfcfcf;
  box-shadow:0 18px 50px rgba(0,0,0,0.14);
}
.piece img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
/* resize grip — corner handle, revealed on hover (still grabbable on touch) */
.piece-grip{
  position:absolute; right:-1px; bottom:-1px;
  width:16px; height:16px;
  border-radius:4px 0 3px 0;
  background:rgba(255,255,255,0.92);
  box-shadow:0 1px 5px rgba(0,0,0,0.28);
  opacity:0;
  transition:opacity .15s ease;
  touch-action:none;
}
.piece:hover .piece-grip{ opacity:1; }

/* ── FLOATING HOVER CAPTION (screen space, crisp at any zoom) ── */
.museum-caption{
  position:fixed;
  z-index:120;
  pointer-events:none;
  background:#111;
  color:#fff;
  font-family:var(--font);
  font-size:12px;
  line-height:1;
  letter-spacing:.01em;
  padding:7px 10px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease;
}
.museum-caption.is-visible{opacity:1; transform:translateY(0);}
.museum-caption .cap-year{opacity:.5; margin-left:8px;}

/* ── HINT (bottom center) ── */
.museum-hint{
  position:fixed;
  left:50%; bottom:48px;
  transform:translateX(-50%);
  z-index:110;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:100px;
  padding:9px 18px;
  font-size:12.5px; color:#666;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
  transition:opacity .4s ease;
}
.museum-hint span{white-space:nowrap;}
.museum-hint .dot{width:3px;height:3px;border-radius:50%;background:#c4c4c4;}
.museum-hint.is-faded{opacity:0;}

/* ── PAN PILLS (iPhone-style minimap scrollbars) ── */
.mmbar{
  position:fixed;
  z-index:112;
  background:rgba(0,0,0,0.06);
  border-radius:100px;
  pointer-events:none;          /* only the thumb is grabbable */
}
.mmbar-h{
  left:50%; bottom:18px;
  transform:translateX(-50%);
  width:min(420px, 40vw); height:6px;
}
.mmbar-v{
  left:18px; top:50%;
  transform:translateY(-50%);
  width:6px; height:min(420px, 40vh);
}
.mmthumb{
  position:absolute;
  background:rgba(0,0,0,0.28);
  border-radius:100px;
  pointer-events:auto;
  cursor:grab;
  transition:background .18s ease;
}
.mmthumb:hover{ background:rgba(0,0,0,0.42); }
.mmthumb:active{ cursor:grabbing; background:rgba(0,0,0,0.5); }
.mmbar-h .mmthumb{ top:0; height:6px; min-width:32px; left:0; }
.mmbar-v .mmthumb{ left:0; width:6px; min-height:32px; top:0; }
/* enlarge the touch/hit area beyond the visible 6px pill */
.mmbar-h .mmthumb::before{ content:''; position:absolute; inset:-10px 0; }
.mmbar-v .mmthumb::before{ content:''; position:absolute; inset:0 -10px; }

/* ── ZOOM CONTROLS (bottom right) ── */
.museum-zoom{
  position:fixed;
  right:24px; bottom:24px;
  z-index:110;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);
}
.museum-zoom button{
  width:40px; height:40px;
  border:none; background:transparent;
  font-size:18px; color:#333; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.museum-zoom button:hover{background:rgba(0,0,0,0.05);}
.museum-zoom button + button{border-top:1px solid rgba(0,0,0,0.07);}
.museum-zoom-pct{
  border-top:1px solid rgba(0,0,0,0.07);
  padding:7px 0;
  text-align:center;
  font-size:11px; color:#888;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  user-select:none;
  min-width:40px;
}

/* ============================================================
   POPUP / MODAL
   ============================================================ */
.pm{
  position:fixed; inset:0;
  z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  background:rgba(250,250,250,0.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.15); backdrop-filter:blur(26px) saturate(1.15);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.pm.is-open{opacity:1; visibility:visible;}

.pm-inner{
  display:flex; align-items:center; justify-content:center; gap:48px;
  max-width:1200px; width:100%;
  transform:scale(.98);
  transition:transform .28s var(--ease);
}
.pm.is-open .pm-inner{transform:scale(1);}

/* media */
.pm-media{
  flex:0 1 auto;
  min-width:0;
  max-width:62%;
  max-height:82vh;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
}
/* single photo sizes to its own proportions — no card/frame behind it */
.pm-media img{
  max-width:100%;
  max-height:82vh;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
  border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,0.20);
}

/* multi-image gallery: vertical scroll of full-width images */
.pm-media.pm-gallery{
  aspect-ratio:auto;
  background:transparent;
  box-shadow:none;
  max-height:80vh;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  padding-right:4px;
  scrollbar-width:thin;
}
.pm-media.pm-gallery img{
  width:100%; height:auto;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.14);
}

/* info panel */
.pm-info{
  flex:0 0 300px;
  color:#111;
  font-family:var(--font);
}
.pm-title{font-size:22px; font-weight:500; line-height:1.25; margin:0 0 14px;}
.pm-story{font-size:15px; line-height:1.6; color:#555; margin:0 0 20px;}
.pm-meta{display:flex; flex-direction:column; gap:10px;}
.pm-year{font-size:13px; color:#888; letter-spacing:.02em;}
.pm-link{
  display:inline-flex; align-items:baseline; gap:8px;
  align-self:flex-start;
  font-size:17px; color:#111; text-decoration:none;
  background:none; border:none; padding:0;
  transition:color .2s ease;
}
.pm-link:hover{ color:rgba(0,0,0,0.45); }
.pm-link[hidden]{display:none;}
.pm-link-arrow{ transition:transform .2s ease; }
.pm-link:hover .pm-link-arrow{ transform:translateX(3px); }

/* arrows */
.pm-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:410;
  width:46px; height:46px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
  color:#222; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.pm-nav:hover{background:#fff;}
.pm-prev{left:28px;} .pm-next{right:28px;}

/* close */
.pm-close{
  position:fixed; top:22px; right:24px;
  z-index:410;
  width:42px; height:42px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
  color:#222; font-size:22px; line-height:1; cursor:pointer;
  transition:background .18s ease;
}
.pm-close:hover{background:#fff;}

/* ── RESPONSIVE ── */
@media (max-width:820px){
  .pm{padding:20px;}
  .pm-inner{flex-direction:column; gap:22px;}
  .pm-media{max-width:100%; width:100%; max-height:52vh;}
  .pm-info{flex:0 0 auto; width:100%; max-width:520px;}
  .pm-prev{left:12px;} .pm-next{right:12px;}
  .pm-nav{width:40px;height:40px;font-size:18px;}
  .pm-link-arrow{display:none;}   /* mobile: plain "Source", no arrow glyph */
  .museum-hint{font-size:11.5px; padding:8px 14px; gap:10px;}
  .museum-hint .hide-sm{display:none;}
}