/* Marginal type on the survey plate. Foreground content always paints above it. */
.archive-lettering {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  color: #40504c;
}
.map-term {
  position: absolute;
  display: block;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400;
}
.term-supply {
  left: 56.5%;
  top: 15.8%;
  font: 400 clamp(24px, 2.45vw, 36px)/1 var(--serif);
  letter-spacing: -.047em;
  opacity: .176;
}
.term-flow {
  top: 24.5%;
  right: 6.2%;
  font: 400 clamp(10px, .84vw, 13px)/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .10em;
  opacity: .22;
}
.term-logistics {
  left: 7.9%;
  bottom: 13.5%;
  font: italic 400 clamp(21px, 1.97vw, 29px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
  opacity: .18;
}
.term-queue {
  right: 37%;
  bottom: 12.1%;
  font: 400 clamp(13px, 1.08vw, 17px)/1 var(--sans);
  letter-spacing: .055em;
  opacity: .19;
}
.term-inventory {
  right: 7%;
  bottom: 16.7%;
  font: 400 clamp(14px, 1.16vw, 19px)/1 var(--serif);
  letter-spacing: .015em;
  opacity: .18;
}
.term-cold {
  left:clamp(126px,15vw,290px);
  bottom:clamp(51px,7svh,78px);
  width:clamp(70px,5.6vw,90px);
  height:auto;
  opacity:.13;
  transform:rotate(-5deg);
}
@media (min-width: 861px) and (max-height: 680px) {
  .term-flow { top: 14%; }
  .term-inventory { bottom: 12%; }
}
@media (max-width: 860px) {
  .term-flow, .term-inventory, .term-queue { display: none; }
  .term-supply {
    top: 69px;
    left: auto;
    right: 7%;
    font-size: clamp(17px, 4.8vw, 26px);
    opacity: .17;
  }
  .term-logistics {
    top: 21.7%;
    left: auto;
    right: 10%;
    bottom: auto;
    font-size: clamp(15px, 3.9vw, 20px);
    opacity: .18;
  }
  .term-cold {
    left:clamp(112px,28vw,198px);
    bottom:12px;
    width:64px;
    opacity:.14;
  }
  html.keyboard-open .archive-lettering { visibility: hidden; }
}
@media (max-width: 380px), (max-width: 860px) and (max-height: 670px) {
  .term-logistics { display: none; }
  .term-supply { top: 66px; font-size: 15px; }
}
@media (forced-colors: active) { .archive-lettering { display: none; } }
