.rh-house {
  --rh-paper: var(--brand-paper, #f1efe9);
  --rh-ink: var(--brand-accent, #746f65);
  color: var(--rh-ink);
  width: min(100%, 26.25rem);
  margin: 1.25rem 0 0;
}
.rh-drawing { display: block; width: 100%; height: auto; overflow: hidden; }
.rh-drawing path { vector-effect: non-scaling-stroke; }
.rh-surface, .rh-opening { fill: var(--rh-paper, #f1efe9); }
.rh-drawing [data-house-piece] { transform-box: view-box; transform-origin: 0 0; }
.rh-drawing [data-stage="details"] { stroke-width: .8; }
.rh-caption {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.65rem, 3vw, 1.6rem);
  margin: -.75rem 0 0; font: inherit; font-size: .68rem;
  letter-spacing: .18em; line-height: 1.5;
}
.rh-caption i { width: 1.4rem; height: 1px; background: currentColor; opacity: .4; }
.rh-controls { display: flex; justify-content: center; margin-top: .6rem; min-height: 2.75rem; }
.rh-controls[hidden] { display: flex; visibility: hidden; }
.rh-toggle {
  appearance: none; font: inherit; font-size: .68rem; letter-spacing: .09em;
  line-height: 1.4; color: inherit; border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; background: transparent; padding: .7rem .45rem;
  min-height: 2.75rem; cursor: pointer; touch-action: manipulation;
}
.rh-toggle:hover { border-bottom-color: currentColor; }
.rh-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rh-house .rh-controls { display: none; }
}
@media print { .rh-house .rh-controls { display: none; } }