.cairn-plan svg {
  width: 100%;
  height: auto;
  color: #27302d;
  background: #ece7dd;
  border: 1px solid rgba(39, 48, 45, 0.2);
}

.cairn-plan-grid { opacity: 0.16; }
.cairn-plan-grid + g {
  transition: opacity 0.18s ease, transform 0.42s var(--c-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.cairn-plan-grid + g.is-changing { opacity: 0; transform: scale(0.985); }

.cairn-plan-envelope,
.cairn-plan-walls,
.cairn-plan-glazing,
.cairn-plan-fixtures,
.cairn-plan-dimensions {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}
.cairn-plan-envelope { stroke-width: 6; }
.cairn-plan-walls { stroke-width: 2; }
.cairn-plan-glazing { stroke: var(--c-rust); stroke-width: 7; stroke-linecap: square; }
.cairn-plan-fixtures { stroke-width: 1; opacity: 0.48; }
.cairn-plan-labels,
.cairn-plan-dimensions { font-family: var(--c-mono); font-size: 10px; letter-spacing: 0.08em; }
.cairn-plan-labels { fill: currentColor; }
.cairn-plan-terrace-label { fill: var(--c-rust); }
.cairn-plan-dimensions { stroke-width: 1; opacity: 0.62; }
.cairn-plan-dimensions text { fill: currentColor; stroke: none; }

@media (max-width: 560px) {
  .cairn-plan { overflow: hidden; }
  .cairn-plan svg { min-width: 720px; width: 170%; transform: translateX(-20%); }
}

@media (prefers-reduced-motion: reduce) {
  .cairn-plan-grid + g { transition: none; }
}