.post-list {
  display: flex;
  flex-direction: column;

  list-style-type: none;
  padding-left: 0;
  max-width: 76ch;
}

.post-link {
  --not-hover: initial;
  --is-hover: ;

  display: flex;
  justify-content: space-between;
  column-gap: var(--space-2xs);

  padding: var(--space-xs);

  width: 100%;

  color: var(--theme-foreground);
}

@media (width <= 450px) {
  .post-link {
    flex-direction: column;
  }

  .post-date {
    margin-top: var(--space-3xs);
    margin-left: auto;
  }
}

.post-link:visited {
  color: unset;
}

.post-link:hover {
  --not-hover: ;
  --is-hover: initial;
  --hover-color: var(--theme-light, var(--t-blue-7)) var(--theme-dark, var(--theme-background));

  color: var(--hover-color);
  text-decoration: none;

  background-image: linear-gradient(to bottom right,
      var(--theme-light, color-mix(in srgb, white 30%, var(--theme-light-yellow) 70%)) var(--theme-dark, var(--theme-light-yellow)),
      var(--theme-light, color-mix(in srgb, white 30%, var(--theme-light-magenta) 70%)) var(--theme-dark, var(--theme-light-magenta)));
}

.post-link:hover .post-icon {
  --theme-blue: var(--theme-light, var(--theme-dark-blue)) var(--theme-dark, var(--theme-dark-blue));
  --theme-teal: var(--theme-light, var(--theme-dark-teal)) var(--theme-dark, var(--theme-dark-teal));
  --theme-cyan: var(--theme-light, var(--theme-dark-cyan)) var(--theme-dark, var(--theme-dark-cyan));
  --theme-green: var(--theme-light, var(--theme-dark-green)) var(--theme-dark, var(--theme-dark-green));
  --theme-yellow: var(--theme-light, var(--theme-dark-yellow)) var(--theme-dark, var(--theme-dark-yellow));
  --theme-orange: var(--theme-light, var(--theme-dark-orange)) var(--theme-dark, var(--theme-dark-orange));
  --theme-red: var(--theme-light, var(--theme-dark-red)) var(--theme-dark, var(--theme-dark-red));
  --theme-magenta: var(--theme-light, var(--theme-dark-magenta)) var(--theme-dark, var(--theme-dark-magenta));
  --theme-purple: var(--theme-light, var(--theme-dark-purple)) var(--theme-dark, var(--theme-dark-purple));
}

.post-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: var(--space-s);
}

.post-icon {
  width: var(--step-2);
  height: var(--step-2);
  flex-shrink: 0;
}

.post-item.draft {
  --yellow: var(--theme-light-yellow);
  --black: var(--t-gray-8);
  background-image: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 0.2rem, var(--black) 0.2rem, var(--black) 0.4rem);
  padding: 0.2rem;

  & > *:not(:hover) {
    background: var(--theme-background);
  }
}

.post-item:nth-of-type(5n+1) .post-icon {
  --rainbow: var(--theme-orange-flip);
}

.post-item:nth-of-type(5n+2) .post-icon {
  --rainbow: var(--theme-yellow-flip);
}

.post-item:nth-of-type(5n+3) .post-icon {
  --rainbow: var(--theme-green-flip);
}

.post-item:nth-of-type(5n+4) .post-icon {
  --rainbow: var(--theme-blue-flip);
}

.post-item:nth-of-type(5n+5) .post-icon {
  --rainbow: var(--theme-magenta-flip);
}

.post-info {
  display: flex;
  flex-direction: column;
  word-break: break-word;
  hyphens: auto;
}

.post-subtitle {
  color: var(--not-hover, var(--theme-foreground-alt)) var(--is-hover, var(--hover-color));

  & svg {
    width: 1rem;
    height: 1rem;
    display: inline-block;
  }

  font-size: var(--step--1);
}

.post-date {
  font-family: "IosevkaCustom";
  color: var(--not-hover, var(--theme-foreground-alt)) var(--is-hover, var(--hover-color));
  flex-shrink: 0;
  font-size: var(--step--1);
}

.post-year {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: var(--theme-background);
  z-index: 2;
  border-bottom: 2px solid oklch(from var(--theme-foreground-alt) l c h / 0.44);
  --flow-space: var(--space-xs);
  padding-block: var(--space-xs);
}