/* Four detachment detail panels. Extends the existing 38th Phoenix design. */
.detachment-details {
  border-top: 1px solid var(--line);
  background: linear-gradient(160deg, #141315, #1c191b);
}
.detachment-intro {
  gap: 32px;
  align-items: end;
}
.detachment-intro > p {
  max-width: 320px;
}
.detachment-detail-list {
  display: grid;
  gap: 26px;
}
.detachment-detail {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(25px, 5vw, 80px);
  padding: clamp(26px, 4vw, 62px);
  border: 1px solid var(--line);
  background: #232022;
  scroll-margin-top: 30px;
}
.detachment-detail:target {
  border-color: var(--accent);
  box-shadow: inset 3px 0 var(--accent);
}
.detachment-detail:nth-child(even) .detail-art {
  order: 2;
}
.detail-art {
  align-self: center;
  text-align: center;
}
.detail-art img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.detail-index {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.detachment-detail h3 {
  font-size: clamp(32px, 3.5vw, 49px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.3px;
  margin: 0 0 17px;
}
.detail-lede {
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 22px;
}
.detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  border-top: 1px solid var(--line);
  padding-top: 23px;
}
.detail-facts h4 {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 10px;
  font-weight: 700;
  margin: 0 0 9px;
}
.detail-facts p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 25px;
}
.detail-tags span {
  display: inline-block;
  border: 1px solid #685b57;
  color: #ddd0ca;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .4px;
}
.detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 7px;
}
.detail-cta:hover {
  color: var(--text);
}
@media (max-width: 900px) {
  .detachment-detail {
    grid-template-columns: minmax(140px, .65fr) minmax(0, 1.35fr);
    gap: 25px;
  }
  .detail-facts {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 650px) {
  .detachment-intro {
    display: block;
  }
  .detachment-intro > p {
    margin-top: 20px;
  }
  .detachment-detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 25px;
  }
  .detachment-detail:nth-child(even) .detail-art {
    order: 0;
  }
  .detail-art img {
    width: min(78%, 230px);
  }
  .detachment-detail h3 {
    font-size: 33px;
  }
  .detail-lede {
    font-size: 15px;
  }
  .detail-facts {
    grid-template-columns: 1fr;
  }
}