/* Shared line, diamond, circle, and K page-rule ornaments. */
:is(.portfolio-rule, .case-study__divider, .about-divider, .project-archive__divider) {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 27px;
  padding-block: 12px;
}

.portfolio-rule {
  height: 72px;
}

.case-study__divider {
  height: 40px;
  flex: 0 0 auto;
}

:is(.case-study__divider--final, .project-archive__divider) {
  height: 44px;
}

:is(.portfolio-rule__line, .case-study__divider > span, .about-divider > span, .project-archive__line) {
  height: 1px;
  flex: 1 1 auto;
  background: var(--rule-light);
}

:is(.portfolio-rule__diamond, .case-study__divider > i, .about-divider > i, .project-archive__diamond) {
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--rule-light);
  font-style: normal;
  transform: rotate(45deg);
}

:is(.portfolio-rule__diamond--round, .case-study__divider > i.is-round, .about-divider > i.is-round, .project-archive__diamond.is-round) {
  border-radius: 999px;
}

:is(.case-study__divider--final > b, .about-divider > b, .project-archive__mark) {
  width: max-content;
  flex: none;
  color: var(--rule-light);
  font: 400 28px/.7 var(--display);
}

.portfolio-rule__line,
.portfolio-rule__diamond {
  transition: background-color 240ms ease-out;
}

@media (hover: hover) {
  .portfolio-rule:has(.solid-button:hover) :is(.portfolio-rule__line, .portfolio-rule__diamond) {
    background: var(--green-darker);
  }

  .studio-profile__more:has(.solid-button:hover) .portfolio-rule__diamond {
    background: var(--blue-fg);
  }
}

:is(.portfolio-rule, .studio-profile__more):has(.solid-button:is(:hover, :focus-visible)) .portfolio-rule__diamond--round {
  transition-delay: 70ms;
}

.portfolio-rule:has(.solid-button:is(:hover, :focus-visible)) .portfolio-rule__line {
  background: var(--green-darker);
  transition-delay: 140ms;
}

.portfolio-rule:has(.solid-button:focus-visible) .portfolio-rule__diamond {
  background: var(--green-darker);
}

.studio-profile__more:has(.solid-button:focus-visible) .portfolio-rule__diamond {
  background: var(--blue-fg);
}

@media (max-width: 800px) {
  .portfolio-rule {
    gap: 16px;
  }
}

@media (max-width: 680px) {
  .about-divider {
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .portfolio-rule {
    justify-content: center;
  }

  .portfolio-rule__line {
    display: none;
  }
}