/* The wrapper inherits the original clamp, spacing and mobile rules unchanged. */
.heritage-icon { position: relative; flex: none; pointer-events: none; }
.window-note .heritage-icon > .heritage-symbol {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
/* 3D outline: twice the size of the line icons so depth and highlights read. */
html[data-hero-icons='3d'] .window-note .heritage-icon {
  width: clamp(64px, 4.4vw, 108px);
  height: clamp(64px, 4.4vw, 108px);
}
@media (max-width: 1023px) {
  html[data-hero-icons='3d'] .window-note .heritage-icon { width: 64px; height: 64px; }
}
.heritage-icon canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.heritage-icon.is-3d > svg { visibility: hidden; }
.heritage-icon.is-3d > canvas { opacity: 1; }
@media print {
  .heritage-icon canvas { display: none; }
  .heritage-icon.is-3d > svg { visibility: visible; }
}