.dot-strip {
  overflow: hidden;
  border-block: 2px solid var(--ink);
  background: var(--accent);
  color: var(--white);
}

.dot-strip-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: drift 26s linear infinite;
}

.dot-strip span {
  flex: 0 0 auto;
  padding: 18px clamp(26px, 5vw, 64px);
  font-family: "Fraunces", "Gowun Batang", serif;
  font-size: clamp(22px, 3.2vw, 42px);
  white-space: nowrap;
}

.dot-strip span::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: clamp(26px, 5vw, 64px);
  border-radius: 999px;
  background: currentColor;
  vertical-align: 0.12em;
}

.capabilities {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  gap: clamp(36px, 7vw, 96px);
  padding: clamp(82px, 10vw, 132px) max(20px, calc((100vw - var(--max)) / 2));
  background: #fffaf2;
  border-top: 2px solid var(--ink);
}

.capabilities h2 {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.12;
}

.capability-list {
  display: grid;
  border-top: 2px solid var(--ink);
}

.capability-list article {
  display: grid;
  grid-template-columns: 72px minmax(140px, 0.35fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: 26px 0;
  border-bottom: 2px solid var(--ink);
}

.capability-list span {
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 20px;
}

.capability-list h3 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 34px);
}

.capability-list p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 820px) {
  .dot-strip-track { animation-duration: 20s; }
  .capabilities, .capability-list article { grid-template-columns: 1fr; }
  .capability-list article { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-strip-track { animation: none; }
}