/* ============================================================
   The Lantern Collection — a small museum in four rooms
   Room geometry:  W x H x D  (px, world units)
   Camera sits at the world origin looking down -Z.
   ============================================================ */

:root{
  /* defaults only — every .room publishes its own W/H/D, and the five
     surfaces inside it size themselves from those */
  --W: 1800px;
  --H: 1050px;
  --D: 3000px;
  --doorW: 440px;
  --doorH: 700px;
  --panelW: 680px;

  /* A didone for the names, the way an exhibition catalogue sets them, and a
     screen-cut serif for everything meant to be read at label size. */
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --body: Spectral, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#050506}
body{
  font: 400 16px/1.55 var(--body);
  color:#e9e3d6;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* ── stage & world ─────────────────────────────────────────── */
.stage{
  position:fixed; inset:0; overflow:hidden; cursor:grab;
  perspective:1100px; perspective-origin:50% 50%;
  /* not black: anything the compositor has not painted yet reads as gloom in
     the room rather than a hole cut in the floor */
  background:#171410;
}
.world{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.room{position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d;
  --W:1800px; --H:1050px; --D:3000px; --panelW:680px; --doorW:440px; --doorH:700px}
.room.hidden{display:none}

.face{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  transform-style:preserve-3d;
}
.w-back  {width:var(--W); height:var(--H); transform:translate3d(calc(var(--W)/-2), calc(var(--H)/-2), calc(var(--D)*-1))}
.w-left  {width:var(--D); height:var(--H); transform:translate3d(calc(var(--W)/-2), calc(var(--H)/-2), 0) rotateY(90deg)}
.w-right {width:var(--D); height:var(--H); transform:translate3d(calc(var(--W)/2),  calc(var(--H)/-2), calc(var(--D)*-1)) rotateY(-90deg)}
/* Floor and ceiling run a little wider than the walls so that turning never
   opens a gap of empty stage above the cornice or below the skirting — but
   only a little. A surface past about four thousand pixels on a side is
   larger than the compositor will rasterise in one piece, and what you get
   instead is a black rectangle where the floor should be. */
/* A pool of light wider than one band used to be handed to every band it
   touched, and each of them drew the whole of it — so the light doubled where
   two bands overlapped and stepped at the joint. Each band clips its own share
   now, and the shares add back up to one pool. Nothing in a band is three
   dimensional, so clipping it costs nothing. */
.floorband{position:absolute; left:0; top:0; transform-origin:0 0;
  backface-visibility:hidden; transform-style:flat}
/* The ceiling is laid in tiles, like the floor, and for the same reason: one
   plane over a hall is a bigger surface than the compositor will rasterise in
   a piece. Each tile clips its own share of every fitting on it. */
.ceilband{position:absolute; left:0; top:0; transform-origin:0 0;
  backface-visibility:hidden; transform-style:flat}
/* the wall you came in through — closes the box when you turn round */
.w-front {width:var(--W); height:var(--H); transform:translate3d(calc(var(--W)/2), calc(var(--H)/-2), 0) rotateY(180deg)}

/* the back wall is a transparent frame; these are its solid parts, and the
   opening between them carries a painted view of the next gallery */
.panel{position:absolute; top:0; height:100%; width:var(--panelW)}
/* the room on the other side of a doorway, built rather than painted */
/* the group stands a reveal's depth behind the wall — set on the element, so
   that a browser sorting it against the doorway's own joinery puts it behind */
.vestibule{position:absolute; width:0; height:0; transform-style:preserve-3d;
  pointer-events:none}
.v-face{position:absolute; transform-origin:0 0; backface-visibility:hidden;
  background-repeat:no-repeat; background-size:cover}
.v-art{position:absolute; box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.v-art .art-img{display:block; width:100%; height:100%; object-fit:fill;
  box-shadow:0 0 0 6px #c9a24a, 0 0 0 8px rgba(0,0,0,.35)}
.v-art .sculpt-img{display:block; width:100%; height:100%; object-fit:contain}
.v-shadow{position:absolute; transform-origin:0 0; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.5), rgba(0,0,0,0) 70%)}

/* a stretch of solid wall between openings. The ::after is a very faint
   mottle — real plaster is never one flat field of colour, and without it
   large walls read as painted card. */
/* A stretch of wall CLIPS what is painted on it. Everything that belongs to
   the plaster — its light, its mottle, its panels, its skirting — is a child
   of the piece it falls on, and a piece stops at the opening beside it. That
   is a structural guarantee rather than a value that happens to be small
   enough: no matter how wide a pool of light is drawn, it cannot appear in a
   doorway. Nothing in a piece is three dimensional, so the clip is free. */
.wallpiece{position:absolute; top:0; height:100%; overflow:hidden;
  /* half a unit behind the wall plane: enough to give the piece a surface of
     its own to be painted on, so the plaster is never rasterised as part of a
     wall-sized one, and to put it unambiguously behind everything hung on it
     and unambiguously in front of the passage beyond a doorway */
  transform:translateZ(-0.5px)}
/* The mottle is held to the WALL, not to the piece. Sized to the whole wall
   and shifted by where the piece starts, it runs through a joint unbroken.
   Left to the piece it restarted at every joint, and the step — three per cent
   of white at half opacity, nothing you could name — was still a visible line
   from cornice to rail on a dark wall. */
.wallpiece::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-repeat:no-repeat;
  background-size:var(--wallL, 100%) var(--wallH, 100%);
  background-position:calc(0px - var(--pieceX, 0px)) 0;
  background-image:
    radial-gradient(ellipse 40% 30% at 18% 22%, rgba(255,255,255,.030), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 34% 26% at 74% 64%, rgba(0,0,0,.030), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 28% 40% at 46% 88%, rgba(255,255,255,.022), rgba(0,0,0,0) 70%)}
.lintel-piece{position:absolute; top:0}
.panel-l{left:0}
.panel-r{right:0}
.lintel{position:absolute; left:var(--panelW); top:0; width:var(--doorW); height:calc(var(--H) - var(--doorH))}

/* the next gallery, painted at the far side of the reveal */

/* the reveal: four faces giving the wall real thickness. transform-origin
   is the face's own top-left, so each turns into the wall from its edge. */
/* The reveal — the thickness of the wall, turned into the opening.
   The twenty units it stands proud of the wall are not joinery: they are for
   the browser. A reveal and the near side wall of the passage behind it are
   two parallel planes that never meet, and sorting them is a coin toss that
   WebKit was losing — it painted the pale wall of the next gallery over the
   near jamb, and a doorway seen from one side looked as though a sheet of
   glass had been laid across it. Twenty units, seven centimetres, decides it,
   and no one can see the difference. */
.jamb{position:absolute; transform-origin:0 0;
  transform:translate3d(0,0,20px) rotateY(90deg); backface-visibility:visible}
.jamb-top{position:absolute; transform-origin:0 0;
  transform:translate3d(0,0,20px) rotateX(-90deg); backface-visibility:visible}
.jamb-sill{position:absolute; transform-origin:0 0;
  transform:translate3d(0,0,20px) rotateX(-90deg); backface-visibility:visible}

/* a shelf over the head of the opening */
.cornice-shelf{position:absolute; pointer-events:none; transform:translateZ(16px);
  background:linear-gradient(180deg, var(--crown1), var(--crown2));
  box-shadow:0 6px 14px -6px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22)}

/* ── architecture ──────────────────────────────────────────── */
/* moulded surround to a doorway */
/* the cased surround of an opening: a bead, a flat and a shadowed edge */
.architrave{position:absolute; pointer-events:none;
  background:var(--arch-bg);
  box-shadow:0 6px 16px -9px rgba(0,0,0,.65)}
.arch-v{--arch-bg:linear-gradient(90deg,
    rgba(0,0,0,.24) 0 2px,
    rgba(255,255,255,.14) 2px 22%,
    rgba(255,255,255,.05) 22% 40%,
    rgba(0,0,0,.13) 40% 50%,
    rgba(255,255,255,.11) 50% 82%,
    rgba(0,0,0,.10) 82% calc(100% - 2px),
    rgba(0,0,0,.34) calc(100% - 2px) 100%)}
.arch-h{--arch-bg:linear-gradient(180deg,
    rgba(0,0,0,.24) 0 2px,
    rgba(255,255,255,.16) 2px 24%,
    rgba(255,255,255,.06) 24% 42%,
    rgba(0,0,0,.13) 42% 52%,
    rgba(255,255,255,.12) 52% 84%,
    rgba(0,0,0,.10) 84% calc(100% - 2px),
    rgba(0,0,0,.34) calc(100% - 2px) 100%)}
.doornum{position:absolute; font-family:var(--display); font-size:26px; letter-spacing:.1em;
  opacity:.4; pointer-events:none}

/* chair rail */
.dado{position:absolute; left:0; right:0; height:22px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.20) 0 18%,
    rgba(255,255,255,.06) 18% 40%,
    rgba(0,0,0,.10) 40% 62%,
    rgba(0,0,0,.34) 62% 100%);
  box-shadow:0 5px 10px -4px rgba(0,0,0,.5)}

/* the rail an older hang suspends its pictures from */
.picrail{position:absolute; left:0; right:0; height:18px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.18) 0 2px,
    rgba(255,255,255,.07) 2px 40%,
    rgba(0,0,0,.14) 40% 55%,
    rgba(255,255,255,.05) 55% 84%,
    rgba(0,0,0,.28) 84% 100%);
  box-shadow:0 3px 7px -3px rgba(0,0,0,.55)}

/* the cove: the quarter-round that runs a ceiling down into the wall */
.cove{position:absolute; left:0; right:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.09) 34%,
    rgba(255,255,255,.02) 62%,
    rgba(0,0,0,.10) 88%,
    rgba(0,0,0,.16) 100%)}

/* raised panel, the way a grand room is lined */
.wallpanel{position:absolute; pointer-events:none; border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 2px 0 0 rgba(255,255,255,.10),
    inset 0 -2px 0 0 rgba(0,0,0,.30),
    0 0 0 1px rgba(0,0,0,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.07))}

/* coffered ceiling */
.coffer{position:absolute; border-radius:2px;
  background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 3px rgba(201,162,74,.28), inset 0 0 26px rgba(0,0,0,.5)}

/* a pool of lamplight on the floor */
.floorpool{position:absolute; pointer-events:none; border-radius:50%; z-index:0}

/* the little brass light on its arm over each frame */
.pic-light{position:absolute; width:68px; height:16px; transform:translateZ(8px); z-index:3;
  pointer-events:none; border-radius:3px 3px 6px 6px;
  background:linear-gradient(180deg,#d8b06a,#7d5c22);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.6), 0 0 18px rgba(255,226,160,.45)}
.pic-light::after{content:""; position:absolute; left:50%; top:-13px; width:5px; height:14px;
  margin-left:-2.5px; background:linear-gradient(180deg,#8a6a2a,#c9a24a)}

/* floor grille */
.grille{position:absolute; border-radius:1px; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 3px, rgba(255,255,255,.06) 3px 8px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}

/* rope barrier */
/* chandelier */
.chandelier{position:absolute; width:180px; height:300px; transform-style:preserve-3d}
.chandelier::before{content:""; position:absolute; left:50%; top:0; width:4px; height:120px;
  margin-left:-2px; background:linear-gradient(180deg,#8a6a2a,#c9a24a)}
.chandelier::after{content:""; position:absolute; left:0; top:118px; width:180px; height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%, rgba(255,240,190,.95), rgba(255,214,120,.5) 40%, rgba(255,196,90,0) 72%);
  box-shadow:0 0 90px 40px rgba(255,220,150,.30)}

/* ── trims that every room shares ─────────────────────────── */
/* A skirting is a moulding, not a stripe: a flat, a bead, a cavetto and a
   shadowed foot. At eye level this is most of what tells you the room is a
   room. */
.baseboard{position:absolute; left:0; right:0; bottom:0; height:var(--skirt,96px);
  background:linear-gradient(180deg,
    rgba(255,255,255,.15) 0 2px,
    var(--base1) 2px 14%,
    rgba(255,255,255,.10) 14% 17%,
    var(--base1) 17% 27%,
    rgba(0,0,0,.22) 27% 31%,
    var(--base1) 31% 66%,
    var(--base2) 66% 92%,
    rgba(0,0,0,.42) 92% 100%);
  box-shadow:0 -3px 5px -3px rgba(0,0,0,.45), inset 0 14px 20px -14px rgba(0,0,0,.5);
}
.crown{position:absolute; left:0; right:0; top:0; height:var(--crownH,54px);
  background:linear-gradient(180deg,
    var(--crown1) 0 22%,
    rgba(255,255,255,.16) 22% 26%,
    var(--crown1) 26% 44%,
    rgba(0,0,0,.20) 44% 49%,
    var(--crown2) 49% 82%,
    rgba(0,0,0,.30) 82% 90%,
    var(--crown2) 90% 100%);
  box-shadow:0 5px 16px -4px rgba(0,0,0,.42);
}
.rail{position:absolute; left:0; right:0; top:150px; height:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.22));
  opacity:.75;
}

/* ── a hung painting ───────────────────────────────────────── */
.artwork{position:absolute; transform-style:preserve-3d; cursor:pointer}
.aw-wash{                      /* the pool of light the spot throws on the wall */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 34%, rgba(255,246,222,.26), rgba(255,246,222,.10) 45%, rgba(255,246,222,0) 70%);
}
/* A drop shadow without a live filter: filters inside a 3-D scene are
   re-rasterised on every frame, and there are sixteen of these. */
.aw-shadow{
  position:absolute; left:-6%; top:-4%; width:112%; height:114%;
  transform:translate3d(10px,26px,1px); z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 54%, rgba(0,0,0,.62) 0%,
             rgba(0,0,0,.40) 46%, rgba(0,0,0,.14) 68%, rgba(0,0,0,0) 82%);
}
.frame{
  position:absolute; inset:0; transform:translateZ(26px) rotateX(1.4deg); z-index:2;
  transform-origin:50% 0;
}
/* The frame's four returns — the thickness of the moulding, running from its
   face back to the wall. They live in their own box so they carry the same
   tilt and the same fraction of a degree of roll as the frame itself and no
   seam opens at the corners. Lighter at the outer arris, in shadow where they
   meet the plaster, the top catching the light and the underside in the dark,
   which is what tells you there is a light above it. */
.f-box{position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; z-index:1}
/* Each return faces out of the box it belongs to — the top upward, the
   underside down, the sides outward — and hides its own back, so a frame
   behaves like the solid thing it is: from below you see its sides and its
   underside and nothing of its top, exactly as you would in the room. */
.f-side{position:absolute; transform-origin:0 0; backface-visibility:hidden;
  background:var(--edge, linear-gradient(180deg,#8d8577,#4c463c))}
.f-e-top{background:linear-gradient(180deg, rgba(255,246,224,.26), rgba(0,0,0,.10)), var(--edge)}
.f-e-bot{background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.34)), var(--edge)}
.f-e-lft{background:linear-gradient(90deg, rgba(0,0,0,.40), rgba(0,0,0,.06)), var(--edge)}
.f-e-rgt{background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.40)), var(--edge)}
/* what the picture light actually puts on the picture */
.pic-beam{position:absolute; pointer-events:none; z-index:4;
  background:radial-gradient(ellipse 58% 112% at 50% -4%,
    rgba(255,244,216,.14) 0%, rgba(255,244,216,.07) 30%,
    rgba(255,244,216,.02) 58%, rgba(255,244,216,0) 76%)}
/* Hovering a picture used to lean it eighteen units off the wall — and drop
   its roll while it did, so it snapped level as the pointer crossed it. A
   painting does not lean out at you, so it no longer does. */
.frame svg{display:block; width:100%; height:100%}
.art-img{display:block; width:100%; height:100%; object-fit:fill; user-select:none; -webkit-user-drag:none}
.sculpt-img{display:block; width:100%; height:100%; object-fit:contain;
  user-select:none; -webkit-user-drag:none}
.sculpture::after{content:""; position:absolute; left:8%; bottom:-3%; width:84%; height:9%;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%)}
.lb-sculpt{display:flex; align-items:center; justify-content:center}
.canvas{position:relative; width:100%; height:100%; overflow:hidden;
  box-shadow:inset 0 0 34px rgba(0,0,0,.35), inset 0 0 3px rgba(0,0,0,.6)}
/* varnish: the sheen of old oil under a raking gallery light */
.canvas::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 24%,
             rgba(255,255,255,0) 48%, rgba(255,255,255,.04) 78%, rgba(255,255,255,.11) 100%);
  mix-blend-mode:screen; opacity:.34}
/* works on paper are glazed, and glass reflects in hard bands, not a soft
   sheen — it is the quickest way to tell a print from an oil across a room */
.f-print .canvas::after{
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%,
    rgba(255,255,255,.34) 30%, rgba(255,255,255,.10) 38%,
    rgba(255,255,255,0) 44%, rgba(255,255,255,0) 66%,
    rgba(255,255,255,.20) 70%, rgba(255,255,255,.05) 76%,
    rgba(255,255,255,0) 82%);
  opacity:.5}

/* frame styles, one per gallery */
.f-gilt{--edge:linear-gradient(180deg,#dfba72,#8f6823); padding:30px;
  background:
    linear-gradient(135deg,#d8b064 0%,#f2dfa4 14%,#b98a34 32%,#e9cd85 52%,#a97c2c 74%,#e6cb87 90%,#c69a45 100%);
  box-shadow:
    inset 0 0 0 8px rgba(255,240,200,.32),
    inset 0 0 0 12px rgba(90,60,14,.55),
    inset 0 0 0 22px rgba(226,193,124,.75),
    inset 0 0 0 26px rgba(80,52,10,.6),
    0 26px 44px -18px rgba(0,0,0,.75);
  border-radius:3px;
}
.f-gilt::before{content:""; position:absolute; inset:9px; border-radius:2px; pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 3px, rgba(0,0,0,.10) 3px 7px);
  opacity:.5; mix-blend-mode:overlay}

.f-ebony{--edge:linear-gradient(180deg,#231a13,#0b0705); padding:26px;
  background:linear-gradient(150deg,#2a211b,#120d0a 40%,#241a14 70%,#0d0907);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.9),
    inset 0 0 0 9px rgba(176,131,52,.85),
    inset 0 0 0 12px rgba(0,0,0,.75),
    0 30px 50px -20px rgba(0,0,0,.9);
  border-radius:2px;
}
.f-ebony::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.18) 2px 6px)}

.f-white{--edge:linear-gradient(180deg,#f3efe6,#c8c2b4); padding:15px;
  background:linear-gradient(180deg,#fbf9f4,#e8e4da);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), 0 20px 34px -18px rgba(0,0,0,.55);
}
/* prints go in a slim dark frame with a deep mat, the way paper is hung */
/* deep carved gilt, for the salon hang */
.f-salon{--edge:linear-gradient(180deg,#e4c078,#8a641e); padding:38px;
  background:
    linear-gradient(140deg,#e0bb6e 0%,#f8ecc2 10%,#b98a34 26%,#f0d99a 44%,#a97c2c 62%,#efd696 80%,#c69a45 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255,244,214,.4),
    inset 0 0 0 11px rgba(84,54,10,.6),
    inset 0 0 0 24px rgba(232,203,140,.8),
    inset 0 0 0 30px rgba(72,46,8,.65),
    0 30px 50px -20px rgba(0,0,0,.8);
  border-radius:3px;
}
.f-salon::before{content:""; position:absolute; inset:11px; pointer-events:none; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 4px, rgba(0,0,0,.16) 4px 9px);
  opacity:.45; mix-blend-mode:overlay}

.f-print{--edge:linear-gradient(180deg,#2e2924,#141110); padding:44px;
  background:linear-gradient(178deg,#f8f4e8,#ece5d4);
  box-shadow:
    0 0 0 6px #2a2520,
    0 0 0 7px rgba(255,255,255,.12),
    0 20px 34px -18px rgba(0,0,0,.6);
}
.f-print .canvas{box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 20px rgba(0,0,0,.10)}
.f-print .canvas::after{opacity:.16}

.f-float{--edge:linear-gradient(180deg,#16161a,#08080a); padding:0;
  box-shadow:0 0 0 9px #0d0d0f, 0 0 0 10px rgba(255,255,255,.09), 0 40px 60px -22px rgba(0,0,0,.95);
}

/* wall label beside each work */
.plaque{
  position:absolute; transform:translateZ(9px); z-index:3;
  width:104px; padding:6px 7px 5px;
  background:linear-gradient(180deg,#fdfbf6,#eee9dd);
  color:#25211a; font-size:7.6px; line-height:1.36; text-align:left;
  box-shadow:0 7px 13px -6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.35),
             inset 0 0 0 1px rgba(0,0,0,.1);
  pointer-events:none;
}
.plaque b{display:block; font-style:italic; font-weight:500; font-size:8.1px}
.plaque i{display:block; font-style:normal; opacity:.72; font-size:7px; margin-top:1.5px}
/* the one on the face of a pedestal is smaller again and sits flush */
.plaque-plinth{width:104px; box-shadow:0 2px 5px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.14)}

/* ── vinyl wall text (the curatorial panel) ────────────────── */
.vinyl{position:absolute; transform:translateZ(3px); width:520px; text-align:left; pointer-events:none}
.vinyl .v-num{font-size:15px; letter-spacing:.44em; opacity:.6}
.vinyl h2{font-family:var(--display); font-size:54px; line-height:1.02; letter-spacing:.03em; font-weight:400; margin:10px 0 14px}
.vinyl p{font-size:15.5px; line-height:1.72; opacity:.78; max-width:470px}
.vinyl .v-rule{width:70px; height:2px; background:currentColor; opacity:.45; margin:16px 0}

/* ── props: bench, plinth, sculpture ───────────────────────── */
.prop{position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d}
.box-face{position:absolute; left:0; top:0; transform-origin:0 0}

.bench-top{background:linear-gradient(100deg,#5a4130,#7d5c3c 28%,#4a3526 72%,#6b4d33);
  box-shadow:inset 0 0 40px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.10)}
.bench-side{background:linear-gradient(180deg,#4a3626,#241a11)}
.bench-leg{background:linear-gradient(180deg,#2a1f15,#120c08);
  box-shadow:0 8px 14px -6px rgba(0,0,0,.7)}
/* the two solid ends a gallery bench stands on: the same timber as the seat,
   in shadow under it rather than a pair of black posts */
.bench-end{background:linear-gradient(180deg,#3d2c1e,#241a11);
  box-shadow:inset 0 8px 16px -8px rgba(0,0,0,.8)}
.bench-endside{background:linear-gradient(180deg,#2e2116,#17100a)}
body.seated .stage{cursor:default}

.plinth-front{background:linear-gradient(180deg,#f0ece2 0%,#e2ddd1 55%,#cdc7ba 100%)}
.plinth-side{background:linear-gradient(180deg,#d7d2c6,#b9b4a8)}
.plinth-top{background:linear-gradient(180deg,#f6f3ea,#e6e1d5)}
.sculpture{position:absolute; transform-origin:50% 100%; pointer-events:auto; cursor:pointer}
.sculpture svg{display:block; width:100%; height:100%; filter:drop-shadow(0 24px 26px rgba(0,0,0,.55))}
.prop-shadow{position:absolute; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}

/* ── ceiling fittings ──────────────────────────────────────── */
.track{position:absolute; height:10px; background:linear-gradient(180deg,#3a3a40,#16161a); border-radius:2px}
.spot{position:absolute; width:26px; height:16px; background:linear-gradient(180deg,#4a4a52,#1b1b20);
  border-radius:4px; box-shadow:0 0 14px rgba(255,238,200,.5)}
.skylight{position:absolute; background:linear-gradient(180deg,#fffaf0,#efe6d2);
  box-shadow:0 0 60px 18px rgba(255,247,225,.22); opacity:.95}
.skylight::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 6px, rgba(0,0,0,0) 6px 62px),
             repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 6px, rgba(0,0,0,0) 6px 78px)}

/* a glazed lantern raised out of a flat ceiling */
.lanternbox{position:absolute; background:linear-gradient(180deg,#b6b0a0,#8f8a7c);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.22), 0 0 70px 22px rgba(255,247,225,.18)}
/* the dome over the rotunda */
.domering{position:absolute; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,250,236,.16), rgba(0,0,0,.16) 72%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.10), inset 0 0 40px rgba(0,0,0,.28)}
.oculus{position:absolute; border-radius:50%; background:radial-gradient(circle,#fffaf0 0%,#f2e9d4 62%,#cfc6b2 100%);
  box-shadow:0 0 120px 40px rgba(255,247,225,.35), inset 0 0 0 6px rgba(0,0,0,.18)}

/* ── screen furniture ──────────────────────────────────────── */
/* the reticle, while the museum has the mouse */
.reticle{position:fixed; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  z-index:6; pointer-events:none; opacity:0; transition:opacity .25s}
body.locked .reticle{opacity:.55}
.reticle::before,.reticle::after{content:""; position:absolute; background:#f2ece0}
.reticle::before{left:50%; top:0; width:1px; height:100%; margin-left:-.5px}
.reticle::after{top:50%; left:0; height:1px; width:100%; margin-top:-.5px}
.reticle.on{opacity:1}
.reticle.on::before,.reticle.on::after{background:#ffe3a6}
.reticle-ring{position:absolute; inset:-9px; border:1px solid #ffe3a6; border-radius:50%;
  opacity:0; transform:scale(.7); transition:opacity .2s, transform .2s}
.reticle.on .reticle-ring{opacity:.9; transform:scale(1)}
.reticle-name{position:absolute; left:50%; top:34px; transform:translateX(-50%);
  white-space:nowrap; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#f6ecd8; opacity:0; transition:opacity .2s; text-shadow:0 1px 8px rgba(0,0,0,.9)}
.reticle.on .reticle-name{opacity:.9}

/* the invitation to hand the mouse over */
.grab{position:fixed; left:50%; bottom:19%; transform:translateX(-50%); z-index:8;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; pointer-events:none;
  padding:10px 18px; border:1px solid rgba(255,255,255,.22); border-radius:2px;
  background:rgba(0,0,0,.5);
  opacity:.85; transition:opacity .3s}
body.locked .grab{opacity:0}
body.dragging .stage{cursor:grabbing}
body.locked .stage{cursor:none}

.screen-vignette{position:fixed; inset:0; pointer-events:none; z-index:5;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 38%, rgba(8,6,4,.30) 74%, rgba(8,6,4,.62) 100%),
    linear-gradient(0deg, rgba(8,6,4,.22), rgba(0,0,0,0) 22%)}
/* Crossing a threshold is a dip, not a cut. Down fast enough that you never
   see yourself pass through the wall, up slowly as the next room arrives. */
.fade{position:fixed; inset:0; background:#0b0906; opacity:0; pointer-events:none; z-index:20;
  transition:opacity .52s ease-out}
.fade.on{opacity:.96; transition:opacity .24s ease-in}

.hud{position:fixed; inset:auto 0 0 0; z-index:8; padding:20px 26px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6));
  pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hud-room{display:flex; align-items:center; gap:14px}
.hud-num{font-family:var(--display); font-size:30px; letter-spacing:.06em; opacity:.55; min-width:44px}
.hud-title{font-family:var(--display); font-size:21px; letter-spacing:.06em}
.hud-sub{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; opacity:.5; margin-top:3px}
.hud-keys{display:flex; gap:18px; font-size:11.5px; letter-spacing:.12em; opacity:.5;
  text-transform:uppercase; padding-bottom:5px}
.hud-keys b{display:inline-block; min-width:17px; padding:1px 4px; margin-right:2px;
  border:1px solid rgba(255,255,255,.35); border-radius:3px; font-weight:400; text-align:center}
.music-btn{display:flex; align-items:center; gap:9px; pointer-events:auto; cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.22); border-radius:2px;
  color:inherit; font-family:inherit; padding:7px 12px; margin-bottom:4px;
  opacity:.45; transition:opacity .25s, border-color .25s}
.music-btn:hover{opacity:.9; border-color:rgba(255,255,255,.45)}
.music-btn.on{opacity:.85; border-color:rgba(255,226,160,.5); color:#ffe9c0}
.music-note{font-size:15px; line-height:1}
.music-bars{display:flex; align-items:flex-end; gap:2px; height:13px}
.music-bars i{width:2px; height:3px; background:currentColor; opacity:.6}
.music-btn.on .music-bars i{animation:bar 1.6s ease-in-out infinite}
.music-btn.on .music-bars i:nth-child(2){animation-duration:2.3s; animation-delay:.2s}
.music-btn.on .music-bars i:nth-child(3){animation-duration:1.9s; animation-delay:.5s}
.music-btn.on .music-bars i:nth-child(4){animation-duration:2.7s; animation-delay:.1s}
@keyframes bar{0%,100%{height:3px}50%{height:12px}}
@media (prefers-reduced-motion:reduce){.music-btn.on .music-bars i{animation:none; height:7px}}

.splash-load{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  opacity:.35; margin-top:16px; min-height:14px}
.splash-btn[disabled]{opacity:.4; cursor:default; letter-spacing:.26em}
.splash-btn[disabled]:hover{background:none; letter-spacing:.26em}

.hud-right{display:flex; flex-direction:column; align-items:flex-end}
.plan-box{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.35); stroke-width:1}
.plan-box.on{fill:rgba(255,226,160,.3); stroke:rgba(255,226,160,.95)}
.plan-t{fill:rgba(255,255,255,.6); font:9px/1 "Bodoni Moda",Georgia,serif; text-anchor:middle}
.plan-t.on{fill:#ffeec4}

.doorprompt{position:fixed; left:50%; bottom:23%; transform:translateX(-50%) translateY(8px); z-index:8;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; opacity:0; pointer-events:none;
  padding:9px 16px; border:1px solid rgba(255,255,255,.25); border-radius:2px;
  background:rgba(0,0,0,.55);
  transition:opacity .3s, transform .3s}
.doorprompt.on{opacity:.95; transform:translateX(-50%) translateY(0)}
.doorprompt b{font-weight:400; border:1px solid rgba(255,255,255,.5); border-radius:3px; padding:0 5px}


/* the small button that opens the plan */
.map-btn{display:flex; align-items:center; gap:8px; pointer-events:auto; cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.22); border-radius:2px;
  color:inherit; font-family:inherit; padding:7px 12px; opacity:.5;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  transition:opacity .25s, border-color .25s}
.map-btn:hover{opacity:.95; border-color:rgba(255,255,255,.45)}
.map-btn.on{opacity:.95; border-color:rgba(255,226,160,.55); color:#ffe9c0}
.map-btn svg{width:17px; height:17px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.3; opacity:.9}

/* the plan */
.mapwrap{position:fixed; inset:0; z-index:12; display:none;
  background:#0a0a0d; align-items:center; justify-content:center; padding:36px}
.mapwrap.on{display:flex; animation:lbin .3s ease}
.map-inner{width:min(1080px,94vw); display:flex; flex-direction:column; align-items:center}
.map-head{align-self:stretch}
.map-head{display:flex; align-items:baseline; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.map-title{font-family:var(--display); font-size:26px; letter-spacing:.03em; color:#f2ece0}
.map-sub{font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.62; color:#e8dfcb}
#mapSvg{width:auto; height:auto; max-height:74vh; max-width:100%; display:block; margin:0 auto}
.map-foot{margin-top:16px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.55}
.map-foot b{font-weight:400; border:1px solid rgba(255,255,255,.35); border-radius:3px; padding:1px 5px}
.mp-room{fill:rgba(255,255,255,.13); stroke:rgba(255,255,255,.62); stroke-width:1.7}
.mp-room.on{fill:rgba(255,214,132,.20); stroke:#ffd98a; stroke-width:2.6}
.mp-num{fill:rgba(255,255,255,.82); font-family:"Bodoni Moda",Georgia,serif; text-anchor:middle}
.mp-num.on{fill:#ffe9c0}
.mp-name{fill:rgba(255,255,255,.72); text-transform:uppercase; text-anchor:middle}
.mp-name.on{fill:#ffdd98}
.mp-count{fill:rgba(255,255,255,.5); letter-spacing:.1em; text-anchor:middle}
.mp-open{stroke:#0a0a0d; stroke-width:5.5; stroke-linecap:butt}
.mp-entry{fill:rgba(255,226,160,.75)}
.mp-you{fill:#ffe2a0; stroke:#0a0a0d; stroke-width:1.5}
.mp-cone{fill:rgba(255,226,160,.34)}

/* ── lightbox ──────────────────────────────────────────────── */
.lightbox{position:fixed; inset:0; z-index:15; display:none;
  background:rgba(6,6,8,.94); backdrop-filter:blur(6px)}
.lightbox.on{display:block; animation:lbin .4s ease}
@keyframes lbin{from{opacity:0} to{opacity:1}}
.lb-inner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,3.4vw,56px); padding:clamp(24px,4vh,60px) clamp(24px,4vw,88px)}
.lb-art{display:flex; align-items:center; justify-content:center; flex:none}
.lb-art .frame,.lb-art .sculpture{position:relative; transform:none}
.lb-label{width:clamp(240px,26vw,352px); flex:none; max-height:84vh; overflow-y:auto}
@media (max-width:900px){
  .lb-inner{flex-direction:column; gap:20px; padding:52px 24px 24px; overflow-y:auto; justify-content:flex-start}
  .lb-label{width:100%; max-width:520px}
  .lb-label h3{font-size:25px}
}
.lb-label .lb-artist{font-size:12px; letter-spacing:.3em; text-transform:uppercase; opacity:.6}
.lb-label h3{font-family:var(--display); font-size:32px; font-weight:400; font-style:italic; line-height:1.2; margin:12px 0 8px}
.lb-label .lb-meta{font-size:13.5px; opacity:.62; line-height:1.7}
.lb-label .lb-rule{width:56px; height:1px; background:currentColor; opacity:.35; margin:22px 0}
.lb-label .lb-note{font-size:15.5px; line-height:1.8; opacity:.85}
.lb-label .lb-tag{margin-top:26px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.5}
.lb-label .lb-src{margin-top:9px; font-size:10.5px; letter-spacing:.08em; opacity:.32; line-height:1.6}
.lb-close,.lb-nav{position:absolute; z-index:2; background:none; border:0; color:#e9e3d6; cursor:pointer;
  font-family:inherit; opacity:.45; transition:opacity .2s}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:26px; right:34px; font-size:36px; line-height:1}
.lb-nav{top:50%; transform:translateY(-50%); font-size:56px; line-height:1; padding:10px 18px}
.lb-prev{left:14px} .lb-next{right:14px}

/* ── splash ────────────────────────────────────────────────── */
.splash{position:fixed; inset:0; z-index:30; background:#08080a;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:opacity .7s ease}
.splash.off{opacity:0; pointer-events:none}
.splash-inner{max-width:560px; padding:40px}
.splash-rule{height:1px; background:linear-gradient(90deg,transparent,rgba(233,227,214,.5),transparent)}
.splash h1{font-family:var(--display); font-size:64px; font-weight:400; line-height:1.06; letter-spacing:.02em; margin:34px 0 16px}
.splash-sub{font-style:italic; font-size:18px; opacity:.62}
.splash-note{font-size:14.5px; line-height:1.85; opacity:.55; margin:26px auto 34px; max-width:430px}
.splash-btn{font-family:inherit; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:#f3ecdd; background:none; border:1px solid rgba(243,236,221,.45); padding:14px 32px;
  cursor:pointer; transition:background .3s, letter-spacing .3s}
.splash-btn:hover{background:rgba(243,236,221,.1); letter-spacing:.32em}
.splash-keys{font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.35; margin:30px 0 34px}
.splash-keys b{font-weight:400; opacity:.8}