main { padding:18px 20px 60px; }
.sech { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; margin:6px 0 8px 2px; }
/* The overview: the same wall, scaled so all Regale fit the viewport. */
.ov { overflow:hidden; margin-bottom:26px; }
.wall.mini { overflow:visible; padding:8px 0 30px; width:max-content;
  transform-origin:0 0; }
.wall.mini .rbook, .wall.mini .rart { cursor:pointer; }
/* --- The shelf wall: the hallway as it stands, Regale left to right --- */
.wall { display:flex; align-items:flex-start; gap:46px; overflow-x:auto;
  padding:26px 8px 60px; }
.runit { flex:none; }
.runit h2 { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 10px 4px;
  letter-spacing:.04em; text-transform:uppercase; }
.rframe { padding:0 16px; border-radius:3px;
  background:linear-gradient(90deg,#8a6437 0,#c99e63 5%,#b98c50 50%,#c99e63 95%,#8a6437 100%);
  box-shadow:0 16px 36px rgba(60,40,10,.32); }
@media (prefers-color-scheme: dark) {
  .rframe { background:linear-gradient(90deg,#5e441f 0,#8a6a38 5%,#7d5e30 50%,#8a6a38 95%,#5e441f 100%);
    box-shadow:0 16px 36px rgba(0,0,0,.55); }
}
.rboard { position:relative; display:flex; align-items:flex-end; gap:1px;
  flex:1; padding:10px 8px 0; width:796px;
  background:linear-gradient(180deg,#ded4c4 0,#e8e0d2 100%); }
@media (prefers-color-scheme: dark) {
  .rboard { background:linear-gradient(180deg,#2a2620 0,#37322a 100%); }
}
.rboard::after { content:""; display:block; position:absolute; left:-16px; right:-16px;
  bottom:-18px; height:18px; z-index:1;
  background:linear-gradient(180deg,#c99e63 0,#a87c42 45%,#8a6437 100%);
  box-shadow:0 5px 10px rgba(60,40,10,.3); }
@media (prefers-color-scheme: dark) {
  .rboard::after { background:linear-gradient(180deg,#8a6a38 0,#6f5127 45%,#5e441f 100%); }
}
.rboard::before { content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:linear-gradient(180deg,rgba(70,50,20,0) 0,rgba(70,50,20,.2) 100%);
  pointer-events:none; z-index:2; }
.rwrap { margin-bottom:18px; height:252px; display:flex; flex-direction:column;
  justify-content:flex-end; }
.rwrap.span2 { height:522px; }
.rwrap.empty { background:none; }
.rwrap.empty .rgap { flex:1; background:linear-gradient(180deg,#ded4c4 0,#e8e0d2 100%); }
@media (prefers-color-scheme: dark) {
  .rwrap.empty .rgap { background:linear-gradient(180deg,#2a2620 0,#37322a 100%); }
}
.rlabel { font-size:10px; color:var(--muted); margin:22px 0 4px 4px; flex:none; }
.rbook { position:relative; flex:none; border-radius:2px 2px 0 0; display:flex;
  flex-direction:column; align-items:center; justify-content:space-between;
  padding:12px 0 8px; cursor:pointer; z-index:1;
  box-shadow:-2px 0 3px rgba(0,0,0,.25) inset, 2px 0 3px rgba(255,255,255,.12) inset,
    1px -1px 4px rgba(0,0,0,.28); }
.rbook:hover, .rbook:focus-visible { transform:translateY(-8px); outline:none; }
.rbook .t { writing-mode:vertical-rl; font-size:10.5px; font-weight:600;
  letter-spacing:.02em; max-height:76%; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; }
.rbook .t.serif { font-family:Georgia,serif; font-weight:700; }
.rbook .a { writing-mode:vertical-rl; font-size:7.5px; opacity:.75; max-height:15%;
  overflow:hidden; white-space:nowrap; }
@keyframes rflash { 0%,100% { box-shadow:0 0 0 0 rgba(124,92,255,0); }
  20%,60% { box-shadow:0 0 0 4px var(--accent), 0 0 22px 6px var(--accent); } }
.rbook.flash { animation:rflash 2.4s ease-in-out 2; z-index:3; }
/* Drawn depictions of displayed models (ADR 021): catalog items, clickable
   through to their detail card like a book spine. */
.rart { flex:none; margin:0 auto; cursor:pointer; position:relative; z-index:1; }
.rart svg { width:100%; height:100%; display:block; }
.rart:hover, .rart:focus-visible { transform:translateY(-6px); outline:none; }
.rart.flash { animation:rflash 2.4s ease-in-out 2; z-index:3; }
/* Mute placeholders for the non-book objects standing on the boards. Which of
   the two fixture idioms an object gets is decided, not free: a wall with a
   dozen kinds of clutter draws blocks, a wall with two or three conspicuous
   objects draws them (ADR 025, ADR 027). Read that before adding either. */
.rfix { flex:none; display:flex; align-items:flex-end; gap:3px; margin:0 8px;
  opacity:.75; filter:saturate(.45); pointer-events:none; }
.rfix i { display:block; border-radius:2px; }
.rfix.games i { width:88px; background:#b98f6a; border:1px solid rgba(0,0,0,.18);
  box-shadow:0 -9px 0 -1px #a9805c, 0 -18px 0 -2px #c2996f; height:46px; margin-top:34px; }
.rfix.lego i { width:52px; height:92px; background:#9aa3ad; border-radius:2px 2px 0 0;
  background-image:radial-gradient(circle at 30% 10%, rgba(255,255,255,.5) 3px, transparent 4px),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.5) 3px, transparent 4px); }
.rfix.lego i:nth-child(2n) { height:70px; background:#8b7f8f; }
.rfix.lego i:nth-child(3n) { height:104px; background:#a39a8c; }
.rfix.cds i { width:9px; height:125px; background:linear-gradient(90deg,#777 0,#c9c9c9 40%,#8d8d8d 100%);
  border-radius:1px; }
.rfix.puzzles i { width:74px; height:40px; background:#8f9a8b; border:1px solid rgba(0,0,0,.15);
  box-shadow:0 -9px 0 -1px #a2ac9e; }
.rfix.boxes i { width:60px; height:56px; background:#bdb3a2; border:1px solid rgba(0,0,0,.12); }
.rfix.paper i { width:150px; height:26px; border-radius:13px;
  background:linear-gradient(180deg,#e8ddca 0,#cfc0a6 100%);
  box-shadow:0 -12px 0 -2px #ded1ba, 0 -24px 0 -4px #e4d8c3; }
.rfix.fabric i { width:110px; height:44px; border-radius:8px 8px 2px 2px;
  background:repeating-linear-gradient(45deg,#b9a08e 0 8px,#a78d7a 8px 16px); }
.rfix.towels { align-self:stretch; flex:1; display:flex; flex-wrap:wrap;
  align-content:flex-end; gap:6px; padding:0 10px 8px; margin:0; }
.rfix.towels i { width:72px; height:34px; border-radius:17px;
  background:linear-gradient(180deg,#9aa38d 0,#7d8672 100%); }
.rfix.towels i:nth-child(2n) { background:linear-gradient(180deg,#8d9aa3 0,#727d86 100%); }
.rfix.towels i:nth-child(3n) { background:linear-gradient(180deg,#a39a8d 0,#867d72 100%); }
.rfix.cabinet, .rfix.vitrine { align-self:stretch; flex:1; display:flex; gap:8px;
  align-items:stretch; margin:0; padding:10px 6px 0; opacity:1; filter:none; }
.rfix.cabinet i, .rfix.vitrine i { flex:1; height:auto; border-radius:2px 2px 0 0; }
.rfix.cabinet i { border:1px solid rgba(60,40,10,.35);
  background:linear-gradient(90deg,#c99e63 0,#b98c50 40%,#c99e63 80%,#a87c42 100%);
  box-shadow:inset 0 0 24px rgba(60,40,10,.18); }
.rfix.cabinet i::after { content:""; display:block; width:7px; height:7px;
  border-radius:50%; background:#6f5127; margin:130px 12px 0 auto; }
.rfix.cabinet i:nth-child(2)::after { margin:130px auto 0 12px; }
.rfix.vitrine i { border:6px solid #b98c50; background:
  linear-gradient(115deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 45%,rgba(255,255,255,.26) 100%); }
.rfix.minibooks i { width:7px; height:56px; background:#b0894f; }
.rfix.minibooks i:nth-child(2n) { background:#8fa3b0; height:52px; }
.rfix.minibooks i:nth-child(3n) { background:#b0a08f; height:58px; }
/* A drawn object that is not a catalog item: the same drawing treatment as a
   displayed model, but nothing behind it, so it neither lifts nor takes focus.
   It stands where it stands on the board; `mid` centres it on an otherwise
   empty one. */
.rfixart { cursor:default; margin:0; }
.rfixart.mid { margin:0 auto; }
.rfixart:hover { transform:none; }
/* Board 0: the top of the unit. It carries the same board, but standing above
   the frame and without the rails, since nothing up there is enclosed. Its
   plank is the top of the unit, so it has to meet the frame: the label goes
   absolute (it would otherwise add its own height below the plank and open a
   gap the furniture does not have) and the margin below the wrap is exactly
   the height the plank hangs by. */
.rtop { padding:0 16px; }
.rtop .rwrap { position:relative; margin-bottom:18px; }
.rtop .rlabel { position:absolute; left:4px; top:2px; margin:0; }
/* Nothing stands behind what sits on top of the unit, so there is no back
   panel to draw: the plank and the objects on it, and the room behind them.
   They sit centred, having no row of spines to line up against; ranged left
   they read as the start of a shelf that was never filled. */
.rtop .rboard { background:none; justify-content:center; }
.rtop .rboard::before { display:none; }