/* THE WALLS (her words, 2026-10-29): "the background needs to be the repeating wallpaper, on all of the rooms, no more
   maroon plum ... the door needs to be a cute little fairy door embedded into the wallpaper ... floorboards ... little
   fairy holes are the doors, in and above the floorboards ... put the floorboards at the bottom of the screen no matter
   what. Same thing with the baseboards and crown molding ... some wainscoting would be cute ... for rooms where the doors
   are there specifically, or where we've got a big thing like the corkboard, just do a nice thick baseboard, with the
   doors in the baseboard."
   A page wears the walls with <body class="walls">, a crown at the top, and at the bottom a skirting: the baseboard, its
   fairy doors, and the floorboards, always at the bottom of the screen. Information can hang in wainscoting panels.
   The wallpaper is a true repeat of the paper in her Marble room (D:/temp/film/cork/wallpaper_tile.py). One colour
   scheme, no dark mode (her standing rule).
   30 October, her words: "the floorboards are too big ... it's taking up too much space" (a phone's own bars sit there too):
   the floorboards are a thin strip now, the baseboard and its doors as they were. */
:root { --paper-wall: #cfc9a9; --paint: #efe6d0; --paint-shade: #cdbf9c; --paint-edge: #b5a684; --oak: #8a5a35; --oak-dark: #5e3a1f;
  --fairy: #7a3c1d; --brass: #c9a24b; --skirt: 74px; --crown: 26px; }
html { background: var(--paper-wall); }
body.walls { margin: 0; min-height: 100vh; color: #2a1c2e; background: var(--paper-wall) url(art/walls/wallpaper.jpg?v=1) 0 0 / 930px 500px repeat;
  padding-top: var(--crown); padding-bottom: calc(var(--skirt) + 28px); box-sizing: border-box; }

/* the crown molding along the top of the screen */
.crown { position: fixed; left: 0; right: 0; top: 0; height: var(--crown); z-index: 30; pointer-events: none;
  background: linear-gradient(180deg, #f7f0de 0 18%, #ddd0b0 18% 26%, #f3ebd6 26% 48%, #cbbd99 48% 56%, #efe5cd 56% 78%, #b9a985 78% 100%);
  box-shadow: 0 4px 7px #0003; }
.crown::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: repeating-linear-gradient(90deg, #e9dec3 0 6px, #cdbf9c 6px 8px); }

/* the skirting: a thick baseboard with the doors in it, and the floorboards under it */
.skirting { position: fixed; left: 0; right: 0; bottom: 0; height: var(--skirt); z-index: 30; pointer-events: none; }
.skirting .baseboard { position: absolute; left: 0; right: 0; top: 0; height: 68%; border-top: 2px solid var(--paint-edge); box-shadow: 0 -4px 8px #0002;
  background: linear-gradient(180deg, #f6eedc 0 4px, var(--paint-shade) 4px 7px, #f3ead6 7px 14px, var(--paint) 14px 78%, #d8cba9 78% 100%); }
.skirting .floorboards { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; border-top: 3px solid var(--oak-dark);
  background:
    linear-gradient(180deg, #0005, transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 173px, #3d2412aa 173px 175px, transparent 175px 311px),
    repeating-linear-gradient(180deg, var(--oak) 0 11px, #7a4d2c 11px 13px, #956440 13px 24px, #6e4426 24px 26px),
    var(--oak); }
.skirting .floorboards::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 97px, #2a160822 97px 99px, transparent 99px 241px); }

/* the fairy doors: little arched doors cut into the baseboard, standing on the floor */
.fairy { position: absolute; left: 0; right: 0; bottom: 32%; display: flex; justify-content: center; gap: 34px; pointer-events: none; }
.fairy-door { position: relative; display: block; width: 42px; height: 56px; margin-bottom: 0; pointer-events: auto; text-decoration: none;
  border-radius: 21px 21px 0 0; background: #1c100a; box-shadow: inset 0 3px 6px #000c; perspective: 160px; }
.fairy-door::before { content: ""; position: absolute; left: -5px; right: -5px; top: -5px; bottom: 0; border-radius: 26px 26px 0 0; z-index: -1;
  background: repeating-conic-gradient(from 270deg at 50% 100%, #b8a98a 0 9deg, #9d8e70 9deg 10deg); box-shadow: 0 1px 2px #0006; }
.fairy-door i { position: absolute; inset: 3px 3px 0; border-radius: 18px 18px 0 0; transform-origin: 0 50%; transition: transform .35s ease;
  background: repeating-linear-gradient(90deg, var(--door, var(--fairy)) 0 9px, #00000033 9px 10px), var(--door, var(--fairy));
  box-shadow: inset 0 2px 3px #ffffff33, inset 0 -2px 4px #0006; }
.fairy-door i::before { content: ""; position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c8, #f2c45a 45%, #7a5a1c); box-shadow: 0 0 0 2px #3a2010; }
.fairy-door i::after { content: ""; position: absolute; right: 5px; top: 26px; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); box-shadow: 0 1px 1px #0008; }
.fairy-door:hover i, .fairy-door:focus-visible i { transform: rotateY(-38deg); }
.fairy-door:hover, .fairy-door:focus-visible { outline: none; box-shadow: inset 0 3px 6px #000c, 0 0 14px 3px #ffe59aaa; background: #ffe7a0; }
.fairy-door .tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 10px; transform: translateX(-50%) rotate(-2deg); padding: 3px 9px;
  white-space: nowrap; background: #fffaf0; color: #2a1c2e; font: italic 13px Lora, Georgia, serif; box-shadow: 1px 2px 4px #0006;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.fairy-door:hover .tag, .fairy-door:focus-visible .tag { opacity: 1; }

/* wainscoting: paneled lower wall for a page that has things to say; each panel holds a few words */
.wainscot { position: relative; margin: 40px 0 0; padding: 26px 3vw 30px; background: var(--paint); border-top: 10px solid #e2d6b8;
  box-shadow: 0 -3px 0 var(--paint-edge), inset 0 6px 8px #0001; }
.wainscot::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 7px; background: linear-gradient(#f7f0de, #c9bb97); box-shadow: 0 2px 3px #0003; }
.wainscot .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; max-width: 1200px; margin: 0 auto; }
.wainscot .panel { padding: 18px 20px; background: #f4ecda; border: 2px solid #ddd0b0; outline: 6px solid var(--paint); outline-offset: 0;
  box-shadow: inset 2px 2px 0 #fffaf0, inset -2px -2px 0 #c9bb97, 0 0 0 8px var(--paint), 0 0 0 10px var(--paint-edge);
  font: 17px/1.45 'Crimson Pro', Georgia, serif; color: #2a1c2e; }

/* a small label on the paper: plain words that would be lost on the roses */
.walls .note-on-wall { display: inline-block; padding: 4px 12px; background: #fffaf0e6; box-shadow: 1px 2px 4px #0005; transform: rotate(-.6deg); }

@media (max-width: 640px) {
  :root { --skirt: 52px; --crown: 18px; }
  .fairy { gap: 22px; }
  .fairy-door { width: 26px; height: 35px; }
  body.walls { padding-bottom: calc(var(--skirt) + 120px); }      /* the purse stands on the floor; nothing sits under it for good */
}
@media (prefers-reduced-motion: reduce) { .fairy-door i { transition: none; } }
/* the works list and the empty lots are drawn by proto.js, which paints its own dark page; on the walls, the paper shows */
body.walls.proto-page { background: var(--paper-wall) url(art/walls/wallpaper.jpg?v=1) 0 0 / 930px 500px repeat; }