:root {
  --yoko-spec-font-size-sm: clamp(0.75rem, 0.75rem + 0.5vw, 1rem);
  --yoko-spec-font-size-med: clamp(1rem, 1rem + 1vw, 1.5rem);
  --yoko-spec-font-size-lg: clamp(1.5rem, 2vw + 1rem, 2.625rem);
  --yoko-spec-font-size-xl: clamp(2.5rem, 2vw + 2rem, 3.75rem);
}

a {
  cursor: pointer;
  text-decoration: none;

  &:hover,
  :focus {
    color: #e2d1ff;
  }
}

.yoko-spec-flex-separated {
  display: flex;
  justify-content: space-between;
}

.yoko-spec-font-size-clamp-sm {
  font-size: var(--yoko-spec-font-size-sm);
}

.yoko-spec-font-size-clamp-med {
  font-size: var(--yoko-spec-font-size-med);
}

.yoko-spec-font-size-clamp-lg {
  font-size: var(--yoko-spec-font-size-lg);
}

.yoko-spec-front-page-video-columns {
  padding-top: 96px;
  text-wrap-style: pretty;

  > div {
    padding-bottom: 48px;

    &:has(h2) {
      padding-inline: 48px;
    }

    h2 {
      font-size: var(--yoko-spec-font-size-xl);
      line-height: 1.2;
      margin-bottom: 24px;
    }

    h2,
    p {
      max-width: 496px;
    }

    p {
      font-size: var(--yoko-spec-font-size-med);
    }
  }
}

.yoko-spec-max-260-centered {
  margin: auto;
  max-width: 260px;
}

.yoko-scec-max-300 {
  max-width: 300px;
}

.yoko-spec-post-trio {
  margin: auto;
  max-width: 640px;

  img {
    border-radius: 4px;
  }

  h3 {
    font-size: var(--yoko-spec-font-size-med);
    margin-bottom: 6px;

    a:hover,
    a:focus {
      color: #7c427c;
    }
  }
}

.yoko-spec-two-to-one-video-figure {
  display: flex;
  justify-content: flex-end;

  video {
    border-radius: 12px;
    box-shadow: 0 0 3px 0 #39716b;
    max-height: 90vh;
    max-width: 45vh;
  }
}

.yoko-spec-underline-anchor {
  a {
    text-decoration: underline;
  }
}

.yoko-spec-wrap-pretty {
  text-wrap-style: pretty;
}

.yoko-spec-480-left {
  align-items: flex-start;
  display: flex;
  flex-direction: column;

  > * {
    width: min(100%, 480px);
  }
}

.yoko-spec-480-right {
  align-items: flex-end;
  display: flex;
  flex-direction: column;

  > * {
    width: min(100%, 480px);
  }
}

.z-index-negative {
  position: relative;
  z-index: -1;
}

.z-index-10 {
  position: relative;
  z-index: 10;
}

.z-index-100 {
  position: relative;
  z-index: 100;
}

@media screen and (max-width: 781px) {
  .yoko-spec-flex-order-negative-one-on-mobile {
    order: -1;
  }

  .yoko-spec-front-page-video-columns {
    > div:has(h2) {
      padding-inline: 24px;

      h2,
      p {
        max-width: unset;
      }
    }

    .yoko-spec-two-to-one-video-figure {
      justify-content: center;
    }
  }

  .yoko-spec-480-right {
    align-items: flex-start;
  }
}

@media screen and (min-width: 600px) {
  .yoko-spec-hide-600-up {
    display: none;
  }
}

@media screen and (max-width: 599px) {
  .yoko-spec-hide-below-600 {
    display: none;
  }

  .yoko-spec-post-trio {
    > div {
      flex-direction: column;

      > div:not(:last-of-type) {
        border-bottom: 1px solid #3d3145;
        margin-bottom: 36px;
        padding-bottom: 80px;
      }
    }

    a:has(img) {
      margin: auto;
      max-width: 200px;
    }
  }
}

@media screen and (min-width: 532px) {
  .yoko-spec-circular-image-post-surround-message {
    display: none;
  }
}