.rg-hero h1 {
  max-width: 10ch;
}
.rg-hero h1 em {
  max-width: 28ch;
  font-size: 0.28em;
  line-height: 1.12;
  white-space: normal;
}
.rg-canal-map {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(240, 172, 76, 0.2);
  border-radius: 34px;
  background:
    radial-gradient(circle at 58% 30%, rgba(79, 50, 85, 0.34), transparent 48%),
    linear-gradient(145deg, #130e1b, #0b0811);
}
.rg-canal-map svg {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
}
.canal-bank,
.canal-return {
  fill: none;
  stroke: rgba(255, 244, 222, 0.1);
  stroke-width: 38;
  stroke-linecap: round;
}
.canal-water {
  fill: none;
  stroke: #f0ac4c;
  stroke-width: 3;
  stroke-dasharray: 3 10;
  stroke-linecap: round;
}
.canal-return {
  stroke-width: 2;
  stroke: rgba(240, 172, 76, 0.32);
  stroke-dasharray: 1 9;
}
.canal-nodes circle {
  fill: #0a0712;
  stroke: #f0ac4c;
  stroke-width: 3;
}
.canal-numerals {
  fill: #f0ac4c;
  font:
    13px Georgia,
    serif;
  text-anchor: middle;
}
.canal-label {
  position: absolute;
  color: var(--rg-cream);
  font:
    13px/1.2 Georgia,
    serif;
}
.canal-label small {
  display: block;
  margin-bottom: 4px;
  color: var(--rg-gold);
  font:
    9px ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.2em;
}
.cl1 {
  left: 8%;
  top: 13%;
}
.cl2 {
  left: 34%;
  top: 35%;
}
.cl3 {
  right: 9%;
  top: 13%;
}
.cl4 {
  right: 25%;
  bottom: 25%;
}
@media (max-width: 760px) {
  .rg-canal-map {
    min-height: 390px;
  }
  .rg-hero h1 em {
    font-size: 0.27em;
  }
}
@media (max-width: 480px) {
  .rg-canal-map {
    min-height: 330px;
  }
  .canal-label {
    font-size: 11px;
  }
  .cl2 {
    left: 29%;
    top: 36%;
  }
  .cl4 {
    right: 18%;
    bottom: 25%;
  }
}