@charset "UTF-8";

/* Fort Sumter keeps the shared field-atlas system while treating the harbor
   itself—the ring of batteries around one isolated fort—as the visual motif. */

.fort-sumter .battle-hero__title {
  max-width: 7ch;
  font-size: clamp(4.1rem, 8.4vw, 8.1rem);
  letter-spacing: -0.075em;
}

.fort-sumter .battle-hero__art {
  background: #39494b;
}

.fort-sumter .battle-hero__art::after {
  width: 1.35rem;
  background: #c34a2f;
  opacity: 0.8;
}

.fort-sumter .battle-hero .split-hero__image {
  object-position: 57% center;
  filter: saturate(0.82) sepia(0.12) contrast(1.08);
}

.fort-sumter .route-map {
  background:
    radial-gradient(circle at 54% 50%, rgba(233, 225, 207, 0.1) 0 8%, transparent 8.5%),
    linear-gradient(146deg, transparent 0 48%, rgba(233, 225, 207, 0.04) 48.5% 51%, transparent 51.5%),
    #263336;
}

.fort-sumter .route-map::after {
  position: absolute;
  top: 29%;
  left: 29%;
  width: 41%;
  height: 42%;
  border: 1px dashed rgba(217, 77, 50, 0.72);
  border-radius: 50%;
  content: "";
  transform: rotate(-11deg);
}

.fort-sumter .route-map__line {
  top: 16%;
  bottom: 17%;
  left: 53%;
  transform: rotate(48deg);
}

.fort-sumter .route-map__line::before {
  top: 24%;
}

.fort-sumter .route-map__line::after {
  bottom: 12%;
}

.fort-sumter .route-map__point--one {
  top: 17%;
  left: 67%;
}

.fort-sumter .route-map__point--two {
  top: 47%;
  left: 54%;
}

.fort-sumter .route-map__point--three {
  right: auto;
  bottom: 15%;
  left: 28%;
}

.fort-sumter .route-map__place--top {
  top: 11%;
  right: 8%;
  left: auto;
}

.fort-sumter .route-map__place--middle {
  top: 43%;
  right: 8%;
}

.fort-sumter .route-map__place--bottom {
  right: auto;
  bottom: 10%;
  left: 8%;
}

.fort-sumter .battle-rupture::after {
  content: "12";
}

.fort-sumter .night-interlude::before {
  background-image:
    radial-gradient(circle at 18% 28%, rgba(224, 225, 216, 0.13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 61%, rgba(224, 225, 216, 0.09) 0 1px, transparent 1.5px),
    linear-gradient(112deg, transparent 0 58%, rgba(202, 211, 208, 0.035) 59% 66%, transparent 67%);
  background-size: 83px 83px, 127px 127px, 100% 100%;
}

.fort-sumter .force-chart__bar--confederate {
  width: 10%;
}

@media (max-width: 680px) {
  .fort-sumter .battle-hero__title {
    font-size: clamp(3.85rem, 19vw, 6.1rem);
  }
}