/* MUSEUM — PHYSICAL RENDERING
   Every visible architectural surface in the walkable rooms.

   One CSS pixel represents one centimetre.

   Lighting is painted for one large, soft overhead source:
   - broad, low-contrast wall illumination
   - horizontal trim shadows darker than vertical trim shadows
   - the doorway soffit is the darkest doorway surface
   - short shadow bleed down the tops of the side jambs
   - restrained shadows along vertical casing
   - separate horizontal floor-contact shadows

   IMPORTANT:
   Horizontal jamb heads are commonly rotated with rotateX(90deg). They must
   remain visible from either side of the opening. Do not globally apply
   backface-visibility:hidden to .mu-jamb-reveal.
*/

/* =========================================================================
   SHARED POSITIONING AND 3D BEHAVIOR
   ========================================================================= */

.mu-floor,
.mu-floor-shadow,
.mu-ceil,
.mu-wall,
.mu-jamb-reveal,
.mu-jamb-reveal-soffit,
.mu-jamb-soffit,
.mu-door-leaf,
.mu-door-casing,
.mu-door-wallshade,
.mu-door-plinth,
.mu-trim,
.mu-front,
.mu-art {
  position: absolute;
  left: 0;
  top: 0;
}

.mu-door-panel,
.mu-door-handle {
  position: absolute;
}

.mu-doorg,
.mu-simple-doorway,
.mu-door-leaf {
  transform-style: preserve-3d;
}

/* Do not include .mu-jamb-reveal here. The horizontal head can be presented
   to the camera as a back face after rotateX(90deg). */

.mu-floor-shadow,
.mu-door-leaf,
.mu-door-casing,
.mu-door-wallshade,
.mu-door-plinth,
.mu-door-panel,
.mu-door-handle {
  backface-visibility: hidden;
}

/* Vertical reveals do not need two-sided rendering. */

.mu-jamb-reveal-left,
.mu-jamb-reveal-right {
  backface-visibility: hidden;
}

/* The soffit must be visible from either connected room. */

.mu-jamb-reveal-head,
.mu-jamb-reveal-soffit,
.mu-jamb-soffit {
  backface-visibility: visible;
  transform-style: preserve-3d;
}

/* =========================================================================
   ARCHITECTURAL PALETTE
   ========================================================================= */

/* A painted room (app.js muPaint) overrides the six wall tones per room
   group / doorway face; everything else below keeps the house palette. */
:root {
  --mu-wall-front-top: #b8b5ae;
  --mu-wall-front-high: #b3b0aa;
  --mu-wall-front-mid: #afaca6;
  --mu-wall-front-bottom: #aaa7a1;

  --mu-wall-side-top: #aeaba5;
  --mu-wall-side-high: #aaa7a1;
  --mu-wall-side-mid: #a6a39d;
  --mu-wall-side-bottom: #a19e98;

  --mu-door-face: #aaa8a2;
  /* The trim's innermost edge: the darkest thing on the door except the
     soffit under the head jamb (--mu-reveal-head-*). Darker than the side
     reveals' deepest tone (--mu-reveal-back). */
  --mu-door-edge-dark: #68655f;

  --mu-reveal-front: #a09d97;
  --mu-reveal-middle: #908d87;
  --mu-reveal-back: #74716b;

  --mu-reveal-head-front: #66635e;
  --mu-reveal-head-middle: #54514d;
  --mu-reveal-head-back: #44413e;

  --mu-trim-face: #aaa8a2;
  --mu-shadow-rgb: 45, 38, 32;
}

/* =========================================================================
   FLOOR
   ========================================================================= */

/* Herringbone oak parquet. The inset shadow supplies only a slight room-scale
   reduction. Local contact shadows use separate horizontal planes. */

.mu-floor {
  background:
    #eab069
    url("../img/parquet.png")
    repeat;

  background-size: 180px 180px;

  box-shadow:
    inset 0 0 24px 2px rgba(62, 47, 34, 0.10);
}

/* =========================================================================
   FLOOR-CONTACT SHADOW PLANES

   These elements lie horizontally about 0.1–0.2 px above the parquet.
   ========================================================================= */

.mu-floor-shadow {
  pointer-events: none;
  background-color: transparent;
  transform-style: preserve-3d;
}

.mu-floor-shadow-north {
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--mu-shadow-rgb), 0.16) 0,
      rgba(var(--mu-shadow-rgb), 0.10) 2px,
      rgba(var(--mu-shadow-rgb), 0.045) 5px,
      rgba(var(--mu-shadow-rgb), 0) 9px
    );
}

.mu-floor-shadow-south {
  background-image:
    linear-gradient(
      0deg,
      rgba(var(--mu-shadow-rgb), 0.16) 0,
      rgba(var(--mu-shadow-rgb), 0.10) 2px,
      rgba(var(--mu-shadow-rgb), 0.045) 5px,
      rgba(var(--mu-shadow-rgb), 0) 9px
    );
}

.mu-floor-shadow-west {
  background-image:
    linear-gradient(
      90deg,
      rgba(var(--mu-shadow-rgb), 0.16) 0,
      rgba(var(--mu-shadow-rgb), 0.10) 2px,
      rgba(var(--mu-shadow-rgb), 0.045) 5px,
      rgba(var(--mu-shadow-rgb), 0) 9px
    );
}

.mu-floor-shadow-east {
  background-image:
    linear-gradient(
      270deg,
      rgba(var(--mu-shadow-rgb), 0.16) 0,
      rgba(var(--mu-shadow-rgb), 0.10) 2px,
      rgba(var(--mu-shadow-rgb), 0.045) 5px,
      rgba(var(--mu-shadow-rgb), 0) 9px
    );
}

/* Localized plinth shadows fade at their lateral ends. */

.mu-plinth-floor-shadow {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%
    );
}

.mu-plinth-floor-shadow.mu-floor-shadow-north {
  background-image:
    linear-gradient(
      180deg,
      rgba(48, 42, 36, 0.15) 0,
      rgba(48, 42, 36, 0.09) 2px,
      rgba(48, 42, 36, 0.035) 5px,
      rgba(48, 42, 36, 0) 9px
    );
}

.mu-plinth-floor-shadow.mu-floor-shadow-south {
  background-image:
    linear-gradient(
      0deg,
      rgba(48, 42, 36, 0.15) 0,
      rgba(48, 42, 36, 0.09) 2px,
      rgba(48, 42, 36, 0.035) 5px,
      rgba(48, 42, 36, 0) 9px
    );
}

.mu-plinth-floor-shadow.mu-floor-shadow-west {
  background-image:
    linear-gradient(
      90deg,
      rgba(48, 42, 36, 0.15) 0,
      rgba(48, 42, 36, 0.09) 2px,
      rgba(48, 42, 36, 0.035) 5px,
      rgba(48, 42, 36, 0) 9px
    );
}

.mu-plinth-floor-shadow.mu-floor-shadow-east {
  background-image:
    linear-gradient(
      270deg,
      rgba(48, 42, 36, 0.15) 0,
      rgba(48, 42, 36, 0.09) 2px,
      rgba(48, 42, 36, 0.035) 5px,
      rgba(48, 42, 36, 0) 9px
    );
}

/* =========================================================================
   CEILING AND SKYLIGHT
   ========================================================================= */

.mu-ceil {
  background:
    repeating-linear-gradient(
      90deg,
      #c6bfae 0 5px,
      transparent 5px 95px
    ),
    repeating-linear-gradient(
      0deg,
      #c6bfae 0 5px,
      transparent 5px 95px
    ),
    linear-gradient(
      90deg,
      #faf8f0,
      #f2efe3
    );

  border: 60px solid #e9e4d6;

  box-shadow:
    inset 0 0 26px 4px rgba(112, 104, 90, 0.38);
}

/* =========================================================================
   WALLS
   ========================================================================= */

.mu-wall {
  background-color: var(--mu-wall-front-mid);

  background-image:
    linear-gradient(
      180deg,
      var(--mu-wall-front-top) 0,
      var(--mu-wall-front-high) 110px,
      var(--mu-wall-front-mid) 270px,
      var(--mu-wall-front-bottom) 100%
    );
}

.mu-wall.mu-w-ew {
  background-color: var(--mu-wall-side-mid);

  background-image:
    linear-gradient(
      180deg,
      var(--mu-wall-side-top) 0,
      var(--mu-wall-side-high) 110px,
      var(--mu-wall-side-mid) 270px,
      var(--mu-wall-side-bottom) 100%
    );
}

/* =========================================================================
   DOORWAY REVEALS

   The side reveals use two background layers:
   1. A short shadow bleed beneath the head.
   2. A horizontal gradient describing depth through the wall.

   The downward-facing head reveal is the darkest doorway surface.
   ========================================================================= */

.mu-jamb-reveal {
  background-color: var(--mu-reveal-middle);
}

/* Left reveal */

.mu-jamb-reveal-left {
  background-image:
    linear-gradient(
      180deg,
      rgba(39, 37, 34, 0.46) 0,
      rgba(39, 37, 34, 0.34) 7px,
      rgba(39, 37, 34, 0.21) 17px,
      rgba(39, 37, 34, 0.11) 29px,
      rgba(39, 37, 34, 0.045) 42px,
      rgba(39, 37, 34, 0) 58px
    ),
    linear-gradient(
      90deg,
      var(--mu-reveal-front) 0%,
      #9a9791 15%,
      var(--mu-reveal-middle) 58%,
      #827f79 82%,
      var(--mu-reveal-back) 100%
    );

  box-shadow:
    inset 1px 0 rgba(255, 255, 255, 0.07),
    inset -2px 0 3px rgba(48, 44, 40, 0.13);
}

/* Right reveal */

.mu-jamb-reveal-right {
  background-image:
    linear-gradient(
      180deg,
      rgba(39, 37, 34, 0.46) 0,
      rgba(39, 37, 34, 0.34) 7px,
      rgba(39, 37, 34, 0.21) 17px,
      rgba(39, 37, 34, 0.11) 29px,
      rgba(39, 37, 34, 0.045) 42px,
      rgba(39, 37, 34, 0) 58px
    ),
    linear-gradient(
      270deg,
      var(--mu-reveal-front) 0%,
      #9a9791 15%,
      var(--mu-reveal-middle) 58%,
      #827f79 82%,
      var(--mu-reveal-back) 100%
    );

  box-shadow:
    inset -1px 0 rgba(255, 255, 255, 0.07),
    inset 2px 0 3px rgba(48, 44, 40, 0.13);
}

/* Horizontal reveal / soffit

   Multiple selector names are included so the rule works whether the markup
   calls the element a head, reveal-soffit or jamb-soffit.

   The !important declaration is deliberately limited to this surface. It
   prevents a generic wall or doorway background from replacing the dark
   downward-facing material.

   backface-visibility:visible is required because rotateX(90deg) can present
   the element's back face to one of the connected rooms. */

.mu-jamb-reveal-head,
.mu-jamb-reveal-soffit,
.mu-jamb-soffit {
  background:
    linear-gradient(
      180deg,
      var(--mu-reveal-head-front) 0%,
      #5f5c57 16%,
      var(--mu-reveal-head-middle) 42%,
      #4c4945 70%,
      var(--mu-reveal-head-back) 100%
    ) !important;

  backface-visibility: visible;

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -3px 5px rgba(24, 22, 20, 0.34),
    0 4px 8px -6px rgba(24, 22, 20, 0.38);
}

/* =========================================================================
   DOORWAY CASING

   Three pieces of the same moulding, mitred at 45°. The head carries the
   identical profile to the sides — outer edge to opening — so every ridge
   meets its counterpart across the mitre line.

   The outermost step is the lightest band, near enough the wall colour to
   melt into it; its own cast shadow sits just inward of it (below on the
   head, toward the opening on the sides). Under the overhead light the
   head's under-shadow is darker than anything down the sides — the wall
   around the trim carries only a faint ring of shade (.mu-door-wallshade),
   and the trim's innermost edge is the darkest thing here save the soffit.
   ========================================================================= */

.mu-door-casing {
  background-color: var(--mu-door-face);
  background-repeat: no-repeat;
}

/* Left casing: the profile across its width, outer edge at 0. No head-shadow
   bleed — the mitred head sits flush, nothing overhangs the joint. */

.mu-door-casing-left {
  background-image:
    linear-gradient(
      90deg,

      #b2afa9 0,
      #b2afa9 5px,

      #8d8a84 5px,
      #8d8a84 6px,

      #9b9892 6px,
      #9b9892 7px,

      #a4a19b 7px,
      #a4a19b 8px,

      #aaa8a2 8px,
      #aaa8a2 72%,

      #a09d97 72%,
      #a09d97 86%,

      #928f89 86%,
      #928f89 calc(100% - 2px),

      var(--mu-door-edge-dark) calc(100% - 2px),
      var(--mu-door-edge-dark) 100%
    );

  clip-path:
    polygon(
      0 0,
      18px 18px,
      18px 100%,
      0 100%
    );
}

/* Right casing: the same profile mirrored, outer edge at 100%. */

.mu-door-casing-right {
  background-image:
    linear-gradient(
      270deg,

      #b2afa9 0,
      #b2afa9 5px,

      #8d8a84 5px,
      #8d8a84 6px,

      #9b9892 6px,
      #9b9892 7px,

      #a4a19b 7px,
      #a4a19b 8px,

      #aaa8a2 8px,
      #aaa8a2 72%,

      #a09d97 72%,
      #a09d97 86%,

      #928f89 86%,
      #928f89 calc(100% - 2px),

      var(--mu-door-edge-dark) calc(100% - 2px),
      var(--mu-door-edge-dark) 100%
    );

  clip-path:
    polygon(
      0 18px,
      18px 0,
      18px 100%,
      0 100%
    );
}

/* Horizontal head casing

   The sides' profile exactly, turned to run top-to-bottom — outer edge at
   the top, opening at the bottom — so each band lands on its counterpart
   at the mitre. Its under-shadow — a narrow contact line and a soft
   penumbra — is deliberately darker than anything the sides throw: the
   light is overhead, and this is the one horizontal member. */

.mu-door-casing-head {
  background-image:
    linear-gradient(
      180deg,

      #b2afa9 0,
      #b2afa9 5px,

      #8d8a84 5px,
      #8d8a84 6px,

      #9b9892 6px,
      #9b9892 7px,

      #a4a19b 7px,
      #a4a19b 8px,

      #aaa8a2 8px,
      #aaa8a2 72%,

      #a09d97 72%,
      #a09d97 86%,

      #928f89 86%,
      #928f89 calc(100% - 2px),

      var(--mu-door-edge-dark) calc(100% - 2px),
      var(--mu-door-edge-dark) 100%
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      calc(100% - 18px) 100%,
      18px 100%
    );

  filter:
    drop-shadow(0 3px 2px rgba(31, 28, 25, 0.30))
    drop-shadow(0 9px 6px rgba(31, 28, 25, 0.18));
}

/* The faint feathered shade the trim lays on the wall around it: darkest
   against the trim, feathering away from it. Down the sides it is strongest
   near the floor and thins on the way up — but never to nothing: at the top
   it settles to exactly the very faint level of the shade above the head,
   so the whole ring reads as one light. Far lighter than the head's
   under-shadow. Sized and placed by muDoorway. */

.mu-door-wallshade {
  pointer-events: none;
}

/* Above the head: the faintest member, feathering upward and out at its
   ends. Its bottom-edge strength (0.035) is the level the side shades hold
   when they arrive at the top. */

.mu-door-wallshade-top {
  background-image:
    linear-gradient(
      0deg,
      rgba(40, 36, 32, 0.035) 0,
      rgba(40, 36, 32, 0) 100%
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 26px,
      #000 calc(100% - 26px),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 26px,
      #000 calc(100% - 26px),
      transparent 100%
    );
}

.mu-door-wallshade-left {
  background-image:
    linear-gradient(
      270deg,
      rgba(40, 36, 32, 0.10) 0,
      rgba(40, 36, 32, 0.04) 10px,
      rgba(40, 36, 32, 0) 100%
    );
}

.mu-door-wallshade-right {
  background-image:
    linear-gradient(
      90deg,
      rgba(40, 36, 32, 0.10) 0,
      rgba(40, 36, 32, 0.04) 10px,
      rgba(40, 36, 32, 0) 100%
    );
}

/* 0.35 at the top × the 0.10 gradient = 0.035 — the top shade's level. */

.mu-door-wallshade-left,
.mu-door-wallshade-right {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.7) 65%,
      #000 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.7) 65%,
      #000 100%
    );
}

/* =========================================================================
   DOORWAY PLINTHS
   ========================================================================= */

.mu-door-plinth {
  background-color: #a4a19b;

  background-image:
    linear-gradient(
      180deg,

      #b8b6b0 0,
      #b8b6b0 1px,

      #a9a7a1 1px,
      #a9a7a1 18%,

      #a3a09a 18%,
      #a3a09a 82%,

      #918e88 82%,
      #918e88 calc(100% - 2px),

      #77746e calc(100% - 2px),
      #77746e 100%
    );

  box-shadow:
    inset 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 rgba(53, 49, 45, 0.08),
    0 3px 5px -5px rgba(36, 32, 28, 0.25);
}

/* =========================================================================
   CLOSED DOOR LEAVES
   ========================================================================= */

.mu-door-leaf {
  overflow: hidden;
  background-color: #77736d;

  background-image:
    linear-gradient(
      180deg,
      rgba(30, 28, 25, 0.30) 0,
      rgba(30, 28, 25, 0.18) 8px,
      rgba(30, 28, 25, 0.07) 20px,
      rgba(30, 28, 25, 0) 34px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.07) 0,
      transparent 10%,
      transparent 90%,
      rgba(45, 40, 36, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      #85817b 0,
      #7e7a74 44%,
      #74706a 100%
    );

  box-shadow:
    inset 0 0 0 2px rgba(47, 42, 38, 0.24),
    inset 8px 0 12px -12px rgba(255, 255, 255, 0.16),
    inset -8px 0 12px -12px rgba(36, 32, 28, 0.22);
}

.mu-door-panel {
  left: 16px;
  width: calc(100% - 32px);

  background-color: #79756f;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      transparent 30%,
      rgba(43, 39, 35, 0.07) 100%
    );

  border: 3px solid rgba(48, 43, 39, 0.22);

  box-shadow:
    inset 0 2px 3px rgba(42, 38, 34, 0.16),
    0 1px rgba(255, 255, 255, 0.06);

  transform: translateZ(0.4px);
}

.mu-door-panel-upper {
  top: 18px;
  height: 128px;
}

.mu-door-panel-lower {
  top: 160px;
  bottom: 18px;
}

.mu-door-handle {
  right: 17px;
  top: 130px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #d1b56f 0%,
      #9a7738 36%,
      #5e431d 72%,
      #2f2110 100%
    );

  box-shadow:
    0 2px 3px rgba(25, 19, 14, 0.36);

  transform: translateZ(1px);
}

/* Photographed front door with short overhead occlusion. */

.mu-door-leaf.mu-entry-door {
  background:
    linear-gradient(
      180deg,
      rgba(19, 17, 14, 0.36) 0,
      rgba(19, 17, 14, 0.21) 9px,
      rgba(19, 17, 14, 0.08) 22px,
      rgba(19, 17, 14, 0) 38px
    ),
    #2a2118
    url("../img/entry-door.jpg")
    center / cover
    no-repeat;

  box-shadow:
    inset 0 0 0 2px rgba(31, 26, 21, 0.30);
}

/* An OPEN stairway shows the real 3-D flight built behind the reveal (see
   below); its leaf is only the invisible clickable face of the portal. */

.mu-door-leaf.mu-stair-open {
  background: transparent;
  box-shadow: none;
}

/* A SHUT stairway has no well behind it — it keeps a flat, dark flight
   painted on the leaf, and loses the glow of a landing. */

.mu-door-leaf.mu-stair-door.mu-shut-door {
  background-color: #1d1a17;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 40px),
    repeating-linear-gradient(
      180deg,
      #4a443d 0, #4a443d 3px,
      #2c2823 3px, #2c2823 26px
    );
  box-shadow: inset 0 0 0 2px rgba(20, 17, 14, 0.5),
              inset 0 -30px 40px -20px rgba(0, 0, 0, 0.6);
}

.mu-door-leaf.mu-stair-door.mu-stair-dn.mu-shut-door {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .62) 100%),
    repeating-linear-gradient(
      180deg,
      #3a352f 0, #3a352f 2px,
      #211e1a 2px, #211e1a 34px
    );
}

/* The real stair flight behind an open stairway. These are actual horizontal
   treads and vertical risers in world space, projected by the room's camera —
   NOT a picture on the leaf — so their foreshortening changes as the visitor
   moves. 17 cm rise, 25 cm run. Pointer-transparent, so a tap on the flight
   falls through to the invisible leaf that carries the portal. No filter may
   go on the group or a step: a filter on a preserve-3d node flattens it out of
   the depth sort and the treads collapse behind the risers into "shutters". */

.mu-stairwell,
.mu-stair-part {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.mu-stairwell { width: 0; height: 0; }

.mu-stair-riser {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .08) 0,
      rgba(255, 255, 255, .015) 22%,
      rgba(0, 0, 0, .20) 100%),
    #625d54;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    inset 0 -3px 5px rgba(20, 17, 14, .34);
  backface-visibility: visible;
}

.mu-stair-tread {
  background:
    linear-gradient(180deg, #918a7b 0, #777064 12%, #625c52 100%);
  box-shadow:
    inset 0 2px rgba(218, 210, 194, .38),
    inset 0 -5px 8px rgba(27, 23, 19, .34);
  backface-visibility: visible;
}

/* A narrow contrasting nosing makes the depth of each tread readable. */
.mu-stair-nosing {
  background: linear-gradient(180deg, #aaa393, #686157);
  box-shadow:
    0 2px 4px rgba(14, 12, 10, .48),
    inset 0 1px rgba(255, 255, 255, .22);
  backface-visibility: visible;
}

/* Side walls run alongside the flights but do not close them overhead. */
.mu-stair-side {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 32%),
    linear-gradient(90deg, #5c5851, #35312c 72%, #211e1a);
  box-shadow: inset 0 0 18px rgba(17, 14, 12, .34);
  backface-visibility: visible;
}

.mu-stair-side-right {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 32%),
    linear-gradient(270deg, #5c5851, #35312c 72%, #211e1a);
}

/* The lower stairwell gets progressively darker with depth. */
.mu-stairwell-down .mu-stair-tread {
  background:
    linear-gradient(180deg, #7b7569 0, #625c52 14%, #464139 100%);
}

.mu-stairwell-down .mu-stair-riser {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .30)),
    #4e4941;
}

.mu-stairwell-down .mu-stair-nosing {
  background: linear-gradient(180deg, #918a7c, #514b43);
}

/* Darkness beyond the last visible step of a descent — not a landing. */
.mu-stair-void {
  background:
    radial-gradient(75% 40% at 50% 8%,
      rgba(153, 126, 91, .12),
      rgba(29, 25, 21, .18) 40%,
      rgba(5, 4, 4, .96) 100%),
    #080706;
  box-shadow: inset 0 0 55px 18px rgba(0, 0, 0, .82);
  backface-visibility: visible;
}

/* A paired extra door: an open passage into the dark — you can't see where
   it goes, and stepping in takes you there. */
.mu-door-leaf.mu-pass-door {
  background-color: #171512;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 50px),
    linear-gradient(90deg, rgba(0, 0, 0, .4) 0, transparent 18%,
                    transparent 82%, rgba(0, 0, 0, .4) 100%);
  box-shadow: inset 0 0 0 2px rgba(15, 13, 11, 0.6);
}

/* An unpaired extra door keeps the house's shut leaf (the default above);
   a shut stair keeps its treads but loses the glow of a landing. */
.mu-door-leaf.mu-shut-door { cursor: default; }

/* The brass sign over a stairway. Absolutely positioned like every other
   plane: a static child would hand the 0×0 doorway wrap a layout box of its
   own, and the compositor rasterises the whole 3-D subtree against it — the
   wall grows a phantom sliver at its end. */
.mu-stair-sign {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #b99b58, #8f7439);
  color: #241c0d;
  font: 700 9px var(--sans, sans-serif);
  letter-spacing: .22em;
  border: 1px solid rgba(48, 37, 16, 0.55);
  box-shadow: 0 1px 2px rgba(20, 15, 8, 0.4);
}

/* Backward compatibility for older front-door markup. */

.mu-front {
  background:
    linear-gradient(
      180deg,
      rgba(19, 17, 14, 0.36) 0,
      rgba(19, 17, 14, 0.21) 9px,
      rgba(19, 17, 14, 0.08) 22px,
      rgba(19, 17, 14, 0) 38px
    ),
    #2a2118
    url("../img/entry-door.jpg")
    center / cover
    no-repeat;
}

/* =========================================================================
   BASEBOARDS
   ========================================================================= */

.mu-trim {
  background-color: var(--mu-trim-face);
}

.mu-trim.mu-base {
  background-color: var(--mu-trim-face);

  background-image:
    linear-gradient(
      180deg,

      #bebcb6 0,
      #bebcb6 1px,

      #aeaca6 1px,
      #aeaca6 13%,

      #a7a59f 13%,
      #a7a59f 78%,

      #999690 78%,
      #999690 calc(100% - 2px),

      #807d77 calc(100% - 2px),
      #807d77 100%
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 2px 4px -4px rgba(38, 34, 30, 0.24);
}

/* =========================================================================
   CROWN MOULDING

   The crown is horizontal, so its lower profile and wall shadow are darker
   than the shadows beside vertical doorway casing.
   ========================================================================= */

.mu-trim.mu-crown {
  background-color: #999690;

  background-image:
    linear-gradient(
      180deg,

      #8c8983 0%,
      #a09d97 8%,
      #b0aea8 19%,
      #a6a39d 34%,
      #999690 51%,
      #898680 67%,
      #74716b 83%,
      #5b5853 100%
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -2px 2px rgba(35, 32, 29, 0.24),
    0 4px 5px -3px rgba(35, 32, 29, 0.28),
    0 12px 18px -11px rgba(35, 32, 29, 0.34);
}

/* =========================================================================
   PICTURE FRAMES
   ========================================================================= */

.mu-art {
  border: solid transparent;

  border-image:
    url("../img/frame1.png")
    62 64 62 66
    stretch;

  filter:
    drop-shadow(0 10px 20px rgba(20, 15, 8, 0.38))
    drop-shadow(0 3px 7px rgba(20, 15, 8, 0.25));

  backface-visibility: hidden;
  cursor: pointer;
}

.mu-art.mu-f2 {
  border-image:
    url("../img/frame2.png")
    114 111 110 113
    stretch;
}

.mu-art img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;
  background: #2a2622;

  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}