/* The bedroom wall (2026-10-24): her pictures frame to frame, a Victorian hang on a teenager's wall, in plain shapes.
   Loaded after box.css, which gives the colours, the back button, the doors, the card and the bag. One colour scheme,
   no dark mode switch (her standing rule). */
main { max-width: 1100px; gap: 14px; padding-top: 24px; }
/* the wallpaper: velvet with a faint repeat, and a picture rail along the top */
.wall { position: relative; width: 100%; padding: 26px 18px 30px; border-top: 10px solid #7a5230; border-bottom: 14px solid #8a6a4a; box-shadow: inset 0 10px 30px #0008;
  background-color: #4e1230;
  background-image: radial-gradient(circle at 50% 50%, #ffffff10 0 2px, transparent 2.5px), radial-gradient(circle at 0 0, #00000026 0 6px, transparent 6.5px);
  background-size: 28px 28px, 56px 56px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: 64px; grid-auto-flow: dense; gap: 14px; }
.wall:empty::after { content: "The pictures are still being hung."; grid-column: 1 / -1; padding: 60px 0; text-align: center; font: italic 18px Lora, Georgia, serif; color: var(--cream); }
/* a frame: a button with the picture inside, hung a little crooked, with a brass plate under it */
.frame { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease; filter: drop-shadow(4px 7px 6px #000a); }
.frame .mat { position: absolute; inset: 0; display: block; overflow: hidden; background: #1a0610; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame:hover, .frame:focus-visible { transform: rotate(0deg) scale(1.03); z-index: 3; outline: none; }
.frame:focus-visible .mat { box-shadow: 0 0 0 3px var(--teal); }
.frame .plate { position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 50%); max-width: 96%; padding: 1px 8px; border: 1px solid #6a4a10; border-radius: 2px; background: linear-gradient(180deg, #e2b06a, #a67c2e); color: #2a1c2e; font: 11px/1.4 'Crimson Pro', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; pointer-events: none; }
.frame:hover .plate, .frame:focus-visible .plate { opacity: 1; }
/* the frames, mismatched */
.frame.gilt .mat { border: 9px solid #c9a24b; box-shadow: inset 0 0 0 2px #6a4a10, inset 0 0 0 4px #e2b06a; border-radius: 3px; }
.frame.black .mat { border: 6px solid #1a1218; box-shadow: inset 0 0 0 1px #c9a24b88; }
.frame.white .mat { border: 7px solid #f2e2c4; box-shadow: inset 0 0 0 1px #2a1c2e; padding: 6%; background: #fffdf6; border-radius: 2px; }
.frame.white img { border: 1px solid #2a1c2e; }
.frame.oval .mat { border: 8px solid #c9a24b; border-radius: 50%; box-shadow: inset 0 0 0 2px #6a4a10; }
.frame.pink .mat { border: 7px solid #c4477a; box-shadow: inset 0 0 0 2px #fffdf6; border-radius: 2px; }
.frame.teal .mat { border: 7px solid #4fb3a9; box-shadow: inset 0 0 0 2px #2a1c2e; border-radius: 2px; }
/* sizes by what the picture is */
.frame.s1 { grid-column: span 3; grid-row: span 3; }      /* square */
.frame.s1.small { grid-column: span 2; grid-row: span 2; }
.frame.tall { grid-column: span 3; grid-row: span 4; }    /* 3:4, 4:5, 12x16 */
.frame.taller { grid-column: span 2; grid-row: span 3; }  /* 2:3 */
.frame.wide { grid-column: span 4; grid-row: span 3; }    /* 4:3, 3:2, 5:4 */
/* a note taped up: paper, a strip of tape, a date in the corner */
.clip { position: relative; grid-column: span 3; grid-row: span 2; margin: 0; padding: 18px 12px 10px; background: #fffdf6; color: #2a1c2e; border: 1px solid #d9c9a8; box-shadow: 3px 5px 8px #0008; transform: rotate(var(--tilt, 0deg)); font: 14px/1.35 'Crimson Pro', Georgia, serif; overflow: hidden; }
.clip.long { grid-row: span 3; }
.clip.longer { grid-column: span 4; grid-row: span 4; }
.clip.pic { grid-row: span 4; padding-top: 14px; }
.clip::before { content: ""; position: absolute; left: 50%; top: -8px; width: 64px; height: 20px; margin-left: -32px; background: #e6d7a7aa; border: 1px solid #c9b47a55; transform: rotate(-2deg); }
.clip time { display: block; font: italic 12px Lora, Georgia, serif; color: #7a2e55; margin-bottom: 4px; }
.clip p { margin: 0 0 6px; }
.clip img { display: block; width: 100%; height: auto; border: 6px solid #fffdf6; border-bottom-width: 22px; box-shadow: 0 2px 5px #0006; margin: 2px 0 6px; background: #1a0610; }
.clip a { color: #7a2e55; }
.clip.lit { box-shadow: 0 0 0 3px var(--teal), 3px 5px 8px #0008; }
/* a frame's own page, named on the card */
.card .own { margin: 6px 0 0; font: 14px 'Crimson Pro', Georgia, serif; }
.card .own a { color: #7a2e55; }
.feedline { font-size: 15px; }
.feedline a { color: var(--gold); }
@media (max-width: 560px) {
  .wall { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 44px; gap: 10px; padding: 18px 10px 22px; }
  .clip { grid-column: span 4; grid-row: span 3; font-size: 13px; }
  .clip.long { grid-row: span 4; }
  .clip.longer { grid-column: span 5; grid-row: span 6; }
  .clip.pic { grid-row: span 6; }
  .frame.s1 { grid-column: span 4; grid-row: span 4; }
  .frame.s1.small { grid-column: span 3; grid-row: span 3; }
  .frame.tall { grid-column: span 3; grid-row: span 4; }
  .frame.taller { grid-column: span 3; grid-row: span 4; }
  .frame.wide { grid-column: span 4; grid-row: span 3; }
  .frame .plate { font-size: 10px; }
}
/* 2026-10-27, her ask: Victorian frames and matting. Gilt moulding, a beaded gilt, walnut with a gilt slip, cream mats
   with a bevel and a gold fillet, and the ovals. Still plain shapes; her drawn frames go over these later. */
.frame .mat { background: #1a0610; }
.frame.gilt .mat { border: 11px ridge #c9a24b; border-radius: 2px; box-shadow: inset 0 0 0 2px #6a4a10, inset 0 0 0 4px #e2b06a, inset 0 0 0 5px #3a2a08; }
.frame.ornate .mat { border: 12px solid transparent; border-image: repeating-linear-gradient(45deg, #e2b06a 0 4px, #a67c2e 4px 8px, #c9a24b 8px 10px) 12; box-shadow: inset 0 0 0 2px #3a2a08, inset 0 0 0 4px #e2b06a; }
.frame.walnut .mat { border: 10px ridge #5a3a22; border-radius: 2px; box-shadow: inset 0 0 0 2px #c9a24b, inset 0 0 0 3px #2a1c2e; }
.frame.mat .mat { border: 9px ridge #c9a24b; padding: 9%; background: #f2e2c4; box-shadow: inset 0 0 0 2px #6a4a10, inset 0 0 12px #0003; }
.frame.mat img { outline: 1px solid #c9a24b; outline-offset: 2px; border: 2px solid #2a1c2e; box-sizing: border-box; }
.frame.oval .mat { border: 10px ridge #c9a24b; border-radius: 50%; padding: 7%; background: #f2e2c4; box-shadow: inset 0 0 0 2px #6a4a10, inset 0 0 12px #0003; }
.frame.oval img { border-radius: 50%; border: 2px solid #2a1c2e; box-sizing: border-box; }
/* the brass sign along the picture rail */
.sign { grid-column: 1 / -1; justify-self: center; align-self: center; padding: 6px 24px; background: linear-gradient(180deg, #e2b06a, #a67c2e); color: #2a1c2e; border: 2px solid #6a4a10; border-radius: 3px; font: 700 20px/1.3 Lora, Georgia, serif; letter-spacing: .08em; box-shadow: inset 0 1px 0 #fff6, 3px 5px 8px #0008; }
@media (prefers-reduced-motion: reduce) { .frame, .clip { transform: none; transition: none; } .frame:hover, .frame:focus-visible { transform: none; } }