/* around.css — agent-mutable.
 *
 * Styles for the /around/ sub-page: the cabin seen from the side, where
 * the door lives. Day 5 (2026-05-13) shipped the cabin shape; Day 6
 * (2026-05-14) cut the door into the side wall, centred under the
 * chimney so the hearth-room and the entrance read as the same end of
 * the building. Day 7 (2026-05-15) added a small flight of three
 * stepping stones approaching the door head-on from the bottom of the
 * frame, so the door reads as walked-to rather than only cut-in. See
 * messages/open/2026-05-11-door-or-window.md.
 *
 * Reuses scene.css for the world frame (.scene, .scene__sky, .scene__
 * ground, #cabin-scene, #cabin-nav, #day-marker). This file adds the
 * .side-cabin component and the .around-path component.
 *
 * Native pixel layout (76 wide × 80 tall — total height matches the
 * front cabin sprite so the two views read as the same building rotated):
 *
 *                  ┌──┐         chimney 6w × 16h, top at y=80
 *                  │  │         (bottom 6 inside roof, top 10 above)
 *   ┌──────────────│  │──────┐  y=70 (roof top)
 *   │      roof    │  │      │  76w × 30h, overhangs wall 2px each side
 *   ├──┬───────────┴──┴──┬───┤  y=40 (eaves line)
 *   │  │                 │   │
 *   │  │       ┌────┐    │   │  door 12w × 20h, x=[32,44], y=[0,20]
 *   │  │       │door│    │   │  centred under the chimney; reaches the
 *   └──┴───────┴────┴────┴───┘  ground; ink-frame on top + sides.
 *                                y=0 (ground line)
 *
 * Front cabin is 48×80 native; this side view is 76×80. Same height,
 * wider because the side is the long axis of the building.
 *
 * Scales 3x desktop / 2x mobile-narrow, matching the front cabin's pattern.
 */

.side-cabin {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: calc(76px * 3);
  height: calc(80px * 3);
  z-index: 2;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Wall: a long wood-plank rectangle, longer than the front face is wide.
 * Horizontal plank stripes drawn via repeating-linear-gradient so each
 * stripe is a crisp 8-native-pixel band (6px wood + 2px dark seam). */
.side-cabin__wall {
  position: absolute;
  left: calc(2px * 3);
  bottom: 0;
  width: calc(72px * 3);
  height: calc(40px * 3);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--c-wood)       0,
      var(--c-wood)       calc(6px * 3),
      var(--c-wood-dark)  calc(6px * 3),
      var(--c-wood-dark)  calc(8px * 3)
    );
  /* One-native-pixel trim on the three exposed sides — matches the
   * dark frame line on the front cabin's facade. */
  box-shadow:
    inset  3px 0 0 var(--c-wood-dark),
    inset -3px 0 0 var(--c-wood-dark),
    inset 0 -3px 0 var(--c-wood-dark);
}

/* Roof: a slab across the wall's top, slightly wider for the eaves
 * overhang. Shingled register matching the front cabin's roof — a
 * darker base with a banded highlight every 8 native pixels reads as
 * tile rows from this distance. */
.side-cabin__roof {
  position: absolute;
  left: 0;
  bottom: calc(40px * 3);
  width: calc(76px * 3);
  height: calc(30px * 3);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--c-wood-dark)  0,
      var(--c-wood-dark)  calc(7px * 3),
      #5a3a2e             calc(7px * 3),
      #5a3a2e             calc(8px * 3)
    );
  box-shadow:
    inset 0 -3px 0 #4a3325,
    inset 0  3px 0 #4a3325;
}

/* Chimney: a small brick block popping above the roof at the cabin's
 * mid-depth. The front view shows the chimney roughly above cabin
 * centre along the left-right axis; the front-to-back position is
 * not fixed by the front view, so centring it along this axis is a
 * reasonable spatial reading. Chimney top reaches y=80, the same top
 * line as the front cabin sprite. */
.side-cabin__chimney {
  position: absolute;
  left: calc(35px * 3);
  bottom: calc(64px * 3);
  width: calc(6px * 3);
  height: calc(16px * 3);
  background: var(--c-wood-dark);
  /* Darker cap at the very top — 2 native pixels of ink reads as a
   * stone or brick coping, mirroring the chimney cap in the front sprite. */
  box-shadow: inset 0 calc(2px * 3) 0 var(--c-ink);
}

/* Door: a dark wood panel cut into the side wall, centred horizontally
 * (and thereby aligned under the chimney). Reaches the ground so it
 * reads unambiguously as a door, not a window. One native pixel of
 * ink runs along the top + sides as the lintel / jambs; the bottom
 * meets the ground without trim. */
.side-cabin__door {
  position: absolute;
  left: calc(32px * 3);
  bottom: 0;
  width: calc(12px * 3);
  height: calc(20px * 3);
  background: var(--c-wood-dark);
  box-shadow:
    inset  3px 0 0 var(--c-ink),
    inset -3px 0 0 var(--c-ink),
    inset 0  3px 0 var(--c-ink);
}

/* Handle: a tiny cream dot on the right side at mid-height — the
 * smallest readable detail at 3x scale, just enough to mark a door
 * rather than a void. */
.side-cabin__handle {
  position: absolute;
  left: calc(40px * 3);
  bottom: calc(10px * 3);
  width: calc(1px * 3);
  height: calc(1px * 3);
  background: var(--c-cream);
}

/* Mobile narrow: scale 3x → 2x, mirroring scene.css's pattern. */
@media (max-width: 379px) {
  .side-cabin           { width: calc(76px * 2); height: calc(80px * 2); bottom: 8%; }
  .side-cabin__wall     {
    left: calc(2px * 2);
    width: calc(72px * 2);
    height: calc(40px * 2);
    background:
      repeating-linear-gradient(
        to bottom,
        var(--c-wood)       0,
        var(--c-wood)       calc(6px * 2),
        var(--c-wood-dark)  calc(6px * 2),
        var(--c-wood-dark)  calc(8px * 2)
      );
    box-shadow:
      inset  2px 0 0 var(--c-wood-dark),
      inset -2px 0 0 var(--c-wood-dark),
      inset 0 -2px 0 var(--c-wood-dark);
  }
  .side-cabin__roof     {
    bottom: calc(40px * 2);
    width: calc(76px * 2);
    height: calc(30px * 2);
    background:
      repeating-linear-gradient(
        to bottom,
        var(--c-wood-dark)  0,
        var(--c-wood-dark)  calc(7px * 2),
        #5a3a2e             calc(7px * 2),
        #5a3a2e             calc(8px * 2)
      );
    box-shadow:
      inset 0 -2px 0 #4a3325,
      inset 0  2px 0 #4a3325;
  }
  .side-cabin__chimney  {
    left: calc(35px * 2);
    bottom: calc(64px * 2);
    width: calc(6px * 2);
    height: calc(16px * 2);
    box-shadow: inset 0 calc(2px * 2) 0 var(--c-ink);
  }
  .side-cabin__door     {
    left: calc(32px * 2);
    width: calc(12px * 2);
    height: calc(20px * 2);
    box-shadow:
      inset  2px 0 0 var(--c-ink),
      inset -2px 0 0 var(--c-ink),
      inset 0  2px 0 var(--c-ink);
  }
  .side-cabin__handle   {
    left: calc(40px * 2);
    bottom: calc(10px * 2);
    width: calc(1px * 2);
    height: calc(1px * 2);
  }
}

/* Path to the door: three stepping stones approaching the door from
 * the bottom-left of the frame. Same earth-brown register and one-pixel
 * darker shadow band as the front-view stones in scene.css, so the two
 * views read as the same path-language seen from different angles.
 *
 * Cross-view geometry (RULES.md Article XIII). The around view shows
 * the cabin's right (east) face — committing to "side," not "back," to
 * settle the lexical drift that crept into the Day-8 diary. In this
 * view the cabin's front face (south, where the window is) sits to the
 * viewer's left, and the cabin's back (north) to the viewer's right.
 * The door is centred horizontally on the east face, at the cabin's
 * mid-depth. The path leaves the door, heads east (toward the viewer
 * = downward in this view) and curves south (= leftward), exiting
 * bottom-left of frame. The same physical path, seen from the front
 * view, emerges around the cabin's right-side silhouette and sweeps
 * south-east to exit bottom-right.
 *
 * Day 7 placed three stones approaching the door head-on; that read
 * as if the path's origin were directly in front of the wall, which
 * is incompatible with the front-view's south-east sweep. Day 9
 * re-angled the stones leftward (toward cabin-front = south) without
 * changing their sizes or vertical placement, so the path now reads
 * as arriving at the door from the lower-left rather than from below.
 *
 * The wrapper spans the full scene so each stone's bottom: <px> reads
 * against the scene height, not a smaller sub-container. */
.around-path {
  position: absolute;
  inset: 0;
  z-index: 3;               /* above the cabin so the back stone reads
                              * as a doormat rather than vanishing under
                              * the wall's bottom trim */
  pointer-events: none;
}

.around-path__stone {
  position: absolute;
  left: 50%;
  display: block;
  background: #c19465;
  box-shadow: 0 1px 0 #6e4a3a;
}
/* Back stone — sits at the door's threshold like a doormat, centred
 * directly under the door. The cabin is at bottom: 6% so the door's
 * foot lands just above this offset. The curve starts here, so the
 * back stone is the only one not shifted left. */
.around-path__stone--back  { width: 14px; height: 3px; bottom: calc(6% - 1px);  margin-left: -7px;  }
/* Mid stone — shifted ~16px left of centre as the path begins to
 * curve south (toward the cabin's front, which is the viewer's left
 * in this view). Still within the grass strip below the cabin. */
.around-path__stone--mid   { width: 22px; height: 4px; bottom: calc(3% + 0px);  margin-left: -27px; }
/* Front stone — shifted ~34px left of centre, well into the south-
 * leaning curve. At the bottom edge of the scene, partly off-frame. */
.around-path__stone--front { width: 32px; height: 5px; bottom: 0;               margin-left: -50px; }